CSS3技术提供了大量增强用户界面的属性。这些属性可以对界面元素实现外观和行为上明显的调整。从本篇文章开始，小海前端（头条号）就带领小伙伴们一同学习CSS3关于增强用户界面的属性。
承接文章：CSS技术中一直被遗忘的属性，了解的都已成了Web大神，你知道吗？
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
CSS3所提供的增强用户界面的属性以及与此相关的属性比较多，小海前端（头条号）将分几次对其进行讲解。所包含的所有增强用户界面的属性包括：
box-shadow
box-sizing
overflow-x
overflow-y
resize
outline
outline-width
outline-style
outline-color
outline-offset
pointer-events
user-select
appearance
content
counter-increment
counter-reset
quotes
本篇文章先来为大家讲解第一个增强用户界面属性：块级元素的阴影box-shadow。
一、认识box-shadow属性：
对块级元素实现阴影效果，可以增强块级元素的视觉感受，让整个块级元素有凸显出页面的感觉，是现代页面设计中常用的手法。在代码中，要想对块级元素实现阴影效果，可以使用CSS 3提供的下列属性。
CSS3 技术使用box-shadow属性设置块级元素的阴影
该属性可以通过一系列的取值来综合设置块级元素的阴影效果。W3C规定该属性的取值格式如下：
格式：box-shadow: h-shadow v-shadow blur spread color inset/outset;
上述格式中描述的各个取值的含义如下：
h-shadow，必须，阴影水平方向的偏移量。
v-shadow，必须，阴影垂直方向的偏移量。
blur，阴影的边缘柔滑半径。
spread，阴影的扩展半径。
color，阴影的颜色。
inset/outset，内外阴影切换。
二、设置阴影的偏移量：
box-shadow属性的取值有两个必须要设置的参数，即h-shadow和v-shadow。这两个参数可以取负值。
参数h-shadow，取值为正值时，阴影水平向右发生偏移；取值为负值时，阴影水平向左发生偏移。
参数v-shadow，取值为正值时，阴影垂直向下发生偏移；取值为负值时，阴影垂直向上发生偏移。
若box-shadow只有这两个参数取值，则可以在块级元素背面产生一个阴影，并发生一定量的位置偏移，但不会产生边缘的柔化效果。
例1：为一个div块级元素设置阴影，水平偏移和垂直偏移均为5px，阴影的边缘柔滑半径为10px，阴影不具备扩展，阴影颜色为#aaaaaa。
div{box-shadow: 5px 5px 10px 0 #aaaaaa;}
请小伙伴们为该div块级元素同时设置背景颜色、边框效果、圆角效果，观察其阴影效果的实现。
当h-shadow和v-shadow两个参数的取值均为0时，就可以为块级元素设置发光效果。若设置发光效果的同时再配合扩展功能，可以让发光效果更加明显。
例2：为一个div块级元素设置发光，阴影的边缘柔滑半径为10px，阴影具备10像素的扩展功能，阴影颜色为#ff5857。
div{box-shadow: 0 0 10px 10px #ff5857;}
上述代码作用在div块级元素上之后的效果如下图所示。
例2的最终显示效果：利用box-shadow属性模拟发光效果
三、设置投影效果与内阴影效果：
box-shadow属性的最后一个参数可以取值为inset或outset，其默认值为outset，表示外阴影，也就是我们看到的“投影”效果。当该参数取值为inset时，阴影将投射到块级元素的内部，被称为“内阴影”效果。
例3：为一个div块级元素设置内阴影，水平偏移和垂直偏移均为5px，阴影的边缘柔滑半径为10px，阴影不具备扩展，阴影颜色为#ff5857。
div{box-shadow: 5px 5px 10px 0 #ff5857 inset;}
上述代码作用在div块级元素上之后的效果如下图所示。
例3的最终显示效果：利用box-shadow属性设置内阴影
四、设置多组阴影效果同时作用
box-shadow属性允许设置多组阴影效果同时作用于一个块级元素。这里，可以利用阴影的水平/垂直偏移量来设置一组阴影只出现在块级元素的一个边方向上，则4个边方向上可以设置四组不同的阴影效果，以达到同时作用的功能。
格式：box-shadow: shadow1,shadow2,shadow3,shadow4;
例4：查看下列CSS代码。
div{
width: 300px; height: 200px;
border: solid 1px #aaaaaa;
border-radius: 15px;
box-shadow: 0 -10px 10px 0 #ff0000,
10px 0 10px 0 #00ff00,
0 10px 10px 0 #0000ff,
-10px 0 10px 0 #ff00ff;
}
上述代码中，为一个div标记设置了宽度和高度，还设置了一个圆角边框。此外，在设置box-shadow属性时，利用逗号隔开了四组阴影属性的取值。该组代码的外观如下图所示。
例4的最终显示效果
这里来分析这四组阴影属性的取值：
（1）第一组：0 -10px 10px 0 #ff0000
这一组为红色（#ff0000）阴影，水平方向不偏移，垂直方向向上偏移10px，最后产生10px的边缘柔滑效果。总之，第一组代码在块级元素的上方形成了红色的阴影。
（2）第二组：10px 0 10px 0 #00ff00
这一组为绿色（#00ff00）阴影，水平方向向右偏移10px，垂直方向不偏移，最后产生10px的边缘柔滑效果。总之，第二组代码在块级元素的右方形成了绿色的阴影。
（3）第三组：0 10px 10px 0 #0000ff
这一组为绿色（#0000ff）阴影，水平方向不偏移，垂直方向向下偏移10px，最后产生10px的边缘柔滑效果。总之，第三组代码在块级元素的下方形成了蓝色的阴影。
（4）第四组：-10px 0 10px 0 #ff00ff
这一组为品红色（#ff00ff）阴影，水平方向向左偏移10px，垂直方向不偏移，最后产生10px的边缘柔滑效果。总之，第四组代码在块级元素的左方形成了品红色的阴影。
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
文章预告
明天的文章中，继续为大家讲解CSS3中有关增强用户界面的属性。重点为大家讲解box-sizing属性的使用，这将涉及到页面布局时盒模型尺寸的计算方法，希望正在研究页面布局的小伙伴们一定不要错过。