css中的阴影

coderklaus
301 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情

阴影能添加纹理、透视并强调对象的尺寸。在网页设计中，使用光影可以增加物理真实感，并可以用来制作丰富的触觉界面。

因此css也提供了box-shadow, text-shadow等 CSS属性来方便我们为块级元素或文本元素添加对应的阴影效果

box-shadow

box-shadow属性可以为块级元素设置一个或者多个阴影

box-shadow中各个属性的值

属性描述备注
offset-x水平方向的偏移，正数往右偏移, 负数往左偏移必填
offset-y垂直方向的偏移，正数往下偏移, 负数往上偏移必填
blur-radius模糊半径可选
默认值: 0
spread-radius延伸半径可选
默认值: 0
<color>阴影的颜色可选
默认值:
1. 如果没有设置前景色color，即为#000
2. 如果设置了前景色color，即使用color属性的值
inset外框阴影变成内框阴影可选

我们以一个小球来演示box-shadow的阴影显示效果，

首先，我们创建一个基本的小球

<div class="ball"></div>

.ball {
  height: 100px;
  width: 100px;
  border-radius: 50% 50%;
  margin: 50px;
  display: inline-block;
}

此时我们为其添加最基本的阴影

box-shadow: 0 0 #888;

此时在界面上是没有任何的效果的

因为在默认情况下，阴影的大小和div.box的大小一致

所以阴影别div.box所遮挡，因此看不到任何的阴影效果

此时我们可以通过调整offset-x和offset-y来调整阴影的位置

  1. 阴影的水平偏移（offset-x 必需），正表示阴影将在框的右侧，负偏移将阴影放在框的左侧。
  2. 阴影的垂直偏移量（offset-y 必需），负数表示 box-shadow 将在盒子上方，正数表示阴影将在盒子下方。
/* 阴影向左移动3px 向下移动3px */
box-shadow: 3px 3px #888;

L9zgYW.png

此时，我们可以看到我们的阴影效果，但是这并不是我们所需要的

于是我们就需要设置blur-radius，来为盒子的阴影添加模糊半径

对于blur-radius. 默认情况下，阴影是纯色的，没有渐变区域。

但是如果设置了模糊半径，就会创建一个渐变区域，向周围的颜色过渡。

blur-radius取的值只能是0和正数（包括正整数和负整数）

/* 渐变距离为10px */
box-shadow: 3px 3px 10px #888;

L9zz32.png

有的时候我们希望在阴影扩散的时候，可以对阴影进行缩放

此时就需要使用spread-radius

spread-radius是对原来的纯色阴影的缩放

小于0的时候，阴影会缩小

大于0的时候，阴影会扩大

扩散半径可取的值为0,正数和负数(包括整数和小数)

/* 渐变距离为10px */
 box-shadow:0 0 20px 10px #888;

L9z2RH.png

此时我们对比 没有模糊半径，但是又有相同的扩散半径的情况

/* 对比 */
box-shadow:0 0 0 10px #888;

L9z31L.png

我们可以看到 此时在效果上和设置了20px的颜色为#888的border是一致的

所以spread-radius的本质就是对阴影进行缩放

而blur-radius的本质就是实现阴影和周围背景之间的过渡效果

有的时候，我们希望阴影的展示效果是朝内进行展示的，此时我们可以使用inset关键字

box-shadow: inset 0px 0px 20px 10px #888

L9zKOU.png

text-shadow

text-shadow用法类似于box-shadow，用于给文字添加阴影效果

但是text-shadow在设置值的时候没有spread-radius和inset

.box {
  text-shadow: 2px 3px 10px #333;
}
avatar
文章
阅读
粉丝