头像

酚酞

韬光养晦,再夺天时

更好看的阴影设计

浅谈阴影

在我们生活中遇到的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);
}

💬 留言

© 2025 Chipzel - 酚酞 | Created by FTaoo