CSS小技巧

目录

• 卡片透明化
• 浮动图像周围弯曲文本
• 布局初始化
• 块级元素首字母
• 使用变量保持一致
• CSS创建饼图
• 更改文本选择颜色
• 悬停效果
• 投影
• 使用放置项居中DIV
• 使用Flexbox居中DIV

卡片透明化

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