关于CSS中box-shadow的简单使用

html-css017

关于CSS中box-shadow的简单使用,第1张

box-shadow就是给盒子、文本的阴影,就像人的影子一样。根据调整其属性进行控制阴影出现的位置,大小,颜色。

box-shadow属性添加一个或者多个阴影。

语法:

最近写一个四周加阴影的项目用到了box-shadow属性,感觉项目里面好多地方都会用到这个属性,于是就专门整理了一下。

语法:

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

为了更清楚的了解box-shadow,做几个demo来给大家演示一下效果:

h-shadow代表的是阴影的水平位置偏移量,可以是正负值

即在x轴的阴影位置,正值阴影出现在右边,负值阴影出现在左边

v-shadow代表垂直阴影位置,即在y轴的阴影位置,可以是正负值

当v-shadow的正值时阴影出现在下面,当v-shadow的负值时阴影出现在上面

blur阴影的模糊距离,这使得阴影部分的过渡看起来更加柔和

spread代表阴影的大小,也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问,其实blur是用于描述模糊半径,它的取值决定了阴影的模糊程度;而spread表示阴影所占区域的大小。

color阴影的颜色值,可以用任何颜色单位的来表示。当我们没有设置颜色值,默认是黑色

默认情况下,设置的阴影都是外部阴影,inset的作用是将外部阴影转换成内部阴影

附:

属性定义及使用说明:

box-shadow属性可以设置一个或多个下拉阴影的框。

兼容性:

css/box-shadow属性语法及取值https://www.apiref.com/css-zh/properties/backgrounds/box-shadow.htm

none:

无阴影

<length>①:

第 1 个长度值定义元素的阴影水平偏移值。正值,阴影出现在元素右侧;负值,则阴影出现在元素左侧

<length>②:

第 2 个长度值定义元素的阴影垂直偏移值。正值,阴影出现在元素底部;负值,则阴影出现在元素顶部

<length>③:

第 3 个长度值定义元素的阴影模糊值半径(如果提供了)。该值越大阴影边缘越模糊,若该值为0,阴影边缘不出现模糊。不允许负值

<length>④:

第 4 个长度值定义元素的阴影外延值(如果提供了)。正值,阴影将向四面扩展;负值,则阴影向里收缩

<color>:

定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色

inset:

定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影