搜索内容

css3阴影边框属性怎么设置（前端阴影效果详解附实例代码）

Joker • 2022年11月2日 am7:30 • 前端笔记 • 236 阅读

前面两篇文章都有提到过css3阴影属性box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。

关键点:

1、外 box-shadow 前四个参数：x 偏移值、y 偏移值、模糊半径、扩张半径。

2、单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。

左

右

上

下

css3阴影属性知识点：

1、立体文字阴影的关键点在于多层 text-shadow 的叠加

2、合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码

3、运用了 Sass 的颜色函数，渐进实现层级阴影颜色 - fade-out: 改变颜色的透明度，让颜色更加透明 - desaturate: 改变颜色的饱和度值，让颜色更少的饱和

4、HSL(颜色值)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

福

编译后的css(推荐scss在线编译为css工具https://www.sassmeister.com/)

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

从浅到深的学习 CSS3阴影(box-shadow)