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;
}

平滑滚动

html, body{ 
scroll-behavior:smooth; 
}
//Safari浏览器不支持

暗黑模式

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;}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Fill out this field
Fill out this field
请输入有效的电子邮箱地址。