CSS小技巧

卡片透明化

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

悬停效果

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

align-items:enter;

justify-content:center;

}

.center div{

width:100px;

height:100px;

border-radius:50%;

background:#b8b7cd;

}