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

您2019猪事顺利，心想事成。

前言

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

没有看过之前文章的小伙伴请点击：

CSS3 box-shadow实现背景动画

CSS3动画解析抖音 LOGO制作

下面我们从最基础的开始演示。

单侧投影

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

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立体文字阴影

知识点：

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%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

编译后的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)

线性渐变模拟长阴影

知识点

1、借用了元素的两个伪元素

2、通过渐变色填充两个伪元素，再通过位移、变换放置在合适的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

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

渐变实现内切角

知识点

1、阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果

2、阴影实现缺点，单个标签最多只能是2个内切圆角

3、径向渐变实现内切圆角可以是4边

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">阴影实现缺点最多是2边</div>
<div class="linear">径向渐变内切圆角4边</div>

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

圆环进度条动画

知识点 ：圆环进度条的移动本质上是阴影顺序延时移动的结果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

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

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

ext-shadow是CSS3新增属性，该属性可以为页面中的文本添加阴影效果。text-shadow属性的基本语法格式如下：

选择器{text-shadow:h-shadow v-shadow blur color;}

在上面的语法格式中，h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的p距离，blur用于设置模糊半径，color用于设置阴影颜色。

下面通过一个案例来演示text-shadow属性的用法，如例所示。

example.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow属性</title>
<style type="text/css">
P{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*设置文字阴影的距离、模糊半径和颜色*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>

上述代码中，第9行代码用于为文字添加阴影效果，设置阴影的水平和垂直偏移距离为10px，模糊半径为10px，阴影颜色为红色。

运行代码效果如下图所示：

可以看出，文本右下方出现了模糊的红色阴影效果。此外，当设置阴影的水平距离参数或垂直距离参数为负值时，可以改变阴影的投射方向。

注意：

阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。

设置多个阴影叠加效果

我们可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果。设置阴影叠加的方法非常简单，我们只需设置多组阴影参数，中间用逗号隔开即可，例如，想要对段落设置红色和绿色阴影叠加的效果，可以将p标签的样式更改为：

P{
  font-size:32px;
  text-shadow:10px 10px 10px red,20px 20px 20px green; /*红色和绿色的投影叠加*/
}

在上面的代码中，为文本依次指定了红色和绿色的阴影效果，并设置了阴影的位置和模糊数值。阴影叠加效果如图所示。

家都知道，现在普遍通用的就是 HTML5 和 CSS3 了，今天就带大家看看 CSS3 的效果。

CSS3 文本效果

CSS3中包含几个新的文本特征。下面苏苏老师会给大家讲解以下文本属性：

text-shadow

box-shadow

text-overflow

word-wrap

word-break

浏览器支持

CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。

（效果图）

我们指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

实例教程：

1.给标题添加阴影

{

text-shadow: 5px 5px 5px #FF0000;

}

CSS3 box-shadow属性，CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

div

{

box-shadow: 10px 10px 5px #888888;

}

2.接下来给阴影添加颜色

div

{

box-shadow: 10px 10px grey;

}

3.接下来再给阴影添加一个模糊效果

div

{

box-shadow: 10px 10px 5px grey;

}

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

代码如下

#boxshadow {

position: relative;

b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

pa dding: 10px;

bac kground: white;

}

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

}

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%;

left: 15%; /* one half of the remaining 30% */ height: 100px;

bottom: 0;

}

阴影的一个使用特例是卡片效果

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

}

CSS3 Text Overflow属性，是CSS3文本溢出属性指定应向用户如何显示溢出内容。

代码如下

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

CSS代码如下

p {word-wrap:break-word;}

CSS3 单词拆分换行属性指定换行规则

CSS代码如下

p.test1 {

word-break: keep-all;

}

p.test2 {

word-break: break-all;

}

新文本属性

总结：CSS3真的很好用！很多CSS2实现不了的都能用CSS3实现~

有什么问题和建议可以私信小编:"666"

在线咨询

上一篇：前端小哥玩HTML复选框上瘾，能画logo做视频，还开源成JS库
下一篇：软件测试/测试开发-一篇文章带你入门HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

前言

单侧投影

立体文字阴影

线性渐变模拟长阴影

渐变实现内切角

圆环进度条动画

公告

您的项目需求