选择文字
后的背景和颜色；
6月21号学习CSS高阶
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.demo p::selection{
color:goldenrod;
background:black;
}
首字母变大
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.first p::first-letter{
font-size:4rem;
}
暗黑模式
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.dark{
background:black;
filter:invert(1) hue-rotate(180deg);
}
文字渐变色
或者文字背景图
I am text.
.gradient p {
background: linear-gradient(185deg,#3affcc,#119897);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline;
}
Flex剧中设置
flex
.flex .vc_column-inner {
display: flex;
align-items: center;
justify-content: center;
}
背景模糊；
毛玻璃效果
背景
@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none) {
.backdrop .vc_column-overlay{
background: hsla(0, 0%, 100%, .75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
}
Flex排版；
.aflex .wpb_wrapper{ display:flex;
/*flex-direction:column;*/
justify-content:space-evenly;
justify-content: space-between;
}
.img1 {flex:1;}
.img2 {flex:2;}