box-shadow属性四个值是什么？ _box-shadow属性四个值是什么?

box-shadow属性四个值是什么？

文章插图

1.offset-x第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
3.blur第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。
负值是不合法的，会被修正成 0 。
4.spread第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。box-shadow的作用：box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。
通过对box-shadow使用的理解，想要一个div的四周都有阴影的话，可通过box-shadow的四周阴影叠加来实现。box-Shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。
省略长度的值是 0 。
box-shadow属性四个值是什么?

文章插图
box-shadow属性四个值是X轴、Y轴、模糊距离、阴影范围。
1.offset-x（X轴）第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。

2.offset-y（Y轴）第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
3.blur（模糊距离）第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。
blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0 。
4.spread（阴影范围）第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
CSS（层叠样式表）：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS3属性box-shadow的使用

文章插图
最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。语法：注意：boxShadow 属性把一个或多个下拉阴影添加到框上。
省略长度的值是 0 。为了更清楚的了解box-shadow ，做几个demo来给大家演示一下效果：h-shadow代表的是阴影的水平位置偏移量，可以是正负值即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。color阴影的颜色值，可以用任何颜色单位的来表示。
当我们没有设置颜色值，默认是黑色默认情况下，设置的阴影都是外部阴影， inset的作用是将外部阴影转换成内部阴影附：属性定义及使用说明：box-shadow属性可以设置一个或多个下拉阴影的框。