遇到的一些 CSS

CSS注释格式:/*This is a comment*/

透明与模糊

opacity:0.5; /*透明度*/
filter: blur(4px); /*模糊毛玻璃效果(整个元素)*/
backdrop-filter: blur(20px); /*背景模糊毛玻璃效果(元素背后)*/
#text::before  /*伪元素*/
{
	content:'';
	position:absolute;top: 0;right: 0;left: 0;bottom: 0;
	filter:blur(5px);
	background:#ffffff;
	z-index:-1; /*层级关系*/
}

多个CSS合在一起写,中间用逗号分隔。

.block-a, .block-b{background-color:#ffffff00 !important;}

属性后插有 !important 的属性拥有最高优先级。详情参见CSS 样式优先级

具有透明度的颜色

以白色半透明为例:

HEX:#ffffff80

RGBA:rgba(255, 255, 255, 0.5)

HSLA:hsla(0, 0%, 100%, 0.5)

水平居中

行内元素:style="text-align:center"

块级元素 :style="margin:auto"style="margin:0 auto"style="margin:10px auto"

WordPress特有居中:class="has-text-align-center"

WordPress多个图像同行显示居中示例:

<p class="has-text-align-center">
<img width="30%" src="https://img.crowya.com/media/cut_2020041000193919SS.png?x-oss-process=style/compress">
<img width="30%" src="https://img.crowya.com/media/cut_2020041000413941SS.png?x-oss-process=style/compress">
<img width="30%" src="https://img.crowya.com/media/cut_2020041000424042SS.png?x-oss-process=style/compress"><p>

在新窗口打开

<a href="链接的页面" target="_blank">新窗口打开</a>
<a href="链接的页面" target="_parent">原窗口打开</a>

小提示:您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇