卡片透明化
backdrop-filter:blur(50px)
浮动图像周围弯曲文本
.any-shape{
width:300px;
float:left;
shape-outside:circle(50%);
}
布局初始化
*{
padding:0;
margin:0;
max-width:100%;
overflow-x:hidden;
position:relative;
display:block;
}
块级元素首字母
p.intro:first-letter{
font-size:100px;
display:block;
float:left;
line-height:.5;
margin:15px 15px 10px 0;
}
使用变量保持一致
:root{ timing-base:1000;}
CSS创建饼图
.piechart{
background:conic-gradient(rgb(255,132,45)0% 25%,rgb(166,195,209)25% 56%,#ffb50d 56% 100%)
border-radius:50%;
width:300px;
height:300px;
}
更改文本选择颜色
::selection{
background-color:#f3b70f;
}
悬停效果
.m h2{
font-size:36px;
color:#000;
font-weight:800;
}
.m h2:hover{
color:#f00;
}
投影
.img-wrapper img{
width:100%;
height:100%;
object-fit:cover;
filter:drop-shadow(30px 10px 4px #757575);
}
使用放置项居中DIV
main{
width:100%;
height:80vh;
display:grid;
place-items:center center;
}
使用Flexbox居中DIV
.center{
display:flex; <!--确保父容器具有flexbox布局-->
align-items:enter; <!--确保flex子项与横轴的中心对齐-->
justify-content:center; <!--确保flex子项与主轴的中心对齐-->
}
.center div{
width:100px; <!--水平,居中圆形-->
height:100px;
border-radius:50%;
background:#b8b7cd;
}