更好看的Css阴影设计

浅谈阴影

在我们生活中遇到的UI经常会出现阴影，阴影给我们视觉上带来立体的效果，创造舒适的观感，但是嘞，在我们设计Css阴影的时候不仅仅是添加一个box-shadow这么简单，在不同的背景以及环境下使用阴影也是有很多讲究滴。

box-shadow: offset-x offset-y blur-radius spread color inset

分别表示：水平阴影偏移、垂直阴影偏移、模糊距离、阴影尺寸、阴影颜色、内部阴影。

增加透明度，提高模糊度

我们来创造一个box-shadow看看效果，可见它塑料感拉满，看着十分突兀

    width:100px;
    height:100px;
    background-color:#D7FFF1;
    border-radius: 8px;
    margin: 0 auto;
    box-shadow:5px 5px 5px #222222;

我们不妨让阴影居中，接下来增大阴影模糊度，然后用rgba代替#增加阴影的透明度，嗯，计划通

    width:100px;
    height:100px;
    background-color:#D7FFF1;
    border-radius: 8px;
    margin: 0 auto;
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.3);

使用相同颜色

当我们遇到一些深色的图标的时候，在背景的影响下直接使用阴影可能会显得很脏，我们不妨试试让阴影颜色和background-color一样，会让图标显得更加通透

在线RGB颜色转换 - RGBA转换16进制

高斯模糊

例子

先定义div,接着设计图片的高度背景居中等参数

HTML

    <div class="parent">
  <div class="Shadow ft"></div>
</div>

CSS

.ft {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  background-image: url("https://s2.loli.net/2022/04/24/zOYeRX6EUq41Vhs.jpg") ;
  background-repeat: no-repeat;
  background-size: contain;
}

然后我们开始设置阴影参数，主要部分在filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3)) blur(10px) opacity(.8);关于drop-shadow我不赘述了，blur模糊度以及后面的opacity设置不透明度，你也可以加入brightness来调整亮度来适应你的背景，这样可以达到更好朵效果

阴影部分

.Shadow {
  position: relative;
}
.Shadow::after {
  content: "";
  z-index: -1;
  top:30%;
  width: 100%;
  height: 80%;
  position: absolute;
  background: inherit;
  border-radius: 20px;
  background-position: center center;
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3)) blur(10px) opacity(.8);
}

搜索