8个CSS小技巧，你知道吗？( 二 ) _CSS

<div class="image">
<divclass="effect">
backdrop-filter: blur(5px);
</div>
</div>
<style>
.image{
background-image: url(YOUR URL);
background-size: cover;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.effect{
font-size: x-large;
color: white;
font-weight: 800;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
padding: 20px;
}
</style>

文章插图
（实现的效果）
7. 组件反射
在 SVG 下方创建反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below;
}

文章插图
（方框反射）
抵消反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below 20px;
}

文章插图
（带有偏移的反射）
渐变反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below 0pxlinear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}

文章插图
（渐变反射）
8. 检查浏览器是否支持某个属性
使用 @Supports 检查 CSS 是否支持特定属性。
/* 检查浏览器是否支持显示 */
@supports(display: flex){
/* 如果支持，则显示为flex 。*/
div{
display: flex
}
}
以上就是关于 CSS 的 8 个小技巧，希望可以帮助到大家。
本文为翻译，原文地址：https://medium.com/@anirudh.munipalli/10-powerful-css-properties-that-every-web-developer-must-know-e5d7f8f04e10

【8个CSS小技巧，你知道吗？】