共计 4628 个字符，预计需要花费 12 分钟才能阅读完成。
27/100 公布文章
加粗斜体题目删除线无序有序待办援用代码块图片视频表格超链接投票导入导出保留撤销重做 new 模版应用富文本编辑器目录发文助手语法阐明 ### box-shadow 在实现案例之前先理解 css 的暗影属性 box-shadow，该属性能够为盒子设置暗影，它有 五个参数 ，X 轴偏移量、Y轴偏移量、含糊半径、扩散半径和色彩。box-shadow 文档 ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow 假如给一个盒子设置暗影：css.shadowBox{width: 100px; height: 100px; border: 1px solid red; background-color: #80c342; box-shadow: 10px 10px 10px 10px black; /** x 轴 y 轴 含糊度 大小 色彩 */}`x 轴 左偏移 10px， y 轴 下偏移 10px，含糊10px，放大10px，色彩为 彩色 `，成果如下：
下面是设置外暗影的，内暗影只须要在属性前增加 inset 即可cssbox-shadow: inset 10px 10px 10px 10px black;
如果没有指定 inset，默认暗影在边框外，即暗影向外扩散。应用 inset 关键字会使得暗影落在盒子外部，这样看起来就像是内容被压低了。此时暗影会在边框之内 (即便是通明边框）、背景之上、内容之下。内暗影和外暗影的用法统一，暗影的根底用法到这里解释结束。上面咱们来看一下暗影的一下其余的利用：### 不占位利用暗影跟边框不同，边框实在占位，1px边框就是给盒子增加 1px 的大小，而暗影是不会影响盒子大小的。用过 ui 框架的搭档都晓得，这些框架个别都会提供几个按钮款式，大略分为红、蓝、黄、白，不同按钮色彩有不同的利用成果，其中有一个非凡的红色按钮，它的边框是黑的，大小和其余按钮统一，明明边框会影响 box 理论大小，然而它的按钮大小却和其余按钮时统一的，这里就能够用暗影实现，通过更改暗影的含糊成果让暗影变为边线，从而实现边框成果。html<div class="insetBtn"> 失常 </div>`css.insetBtn{background-color: #fff; box-shadow: inset 0px 0px 0px 1px #333333;}` 应用内暗影，暗影含糊度为0（不含糊），扩充1px，成果如下：
### 暗影层级在文字之下暗影的层级是在文字之下的，而不影响文字，能够通过该个性实现一些特殊效果，例如：应用内暗影实现鼠标移入，以后按钮高亮的提醒性能，让用户晓得以后选的是哪一个。css.primary{width: 80px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px;}.primary:hover{box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);}
box-shadow是无奈笼罩 img 元素的，因为 img 层级比 box-shadow 高，如果想要实现笼罩 img 元素能够用 outline 边框偏移解决，如下css.insetImg:hover{outline: 200px solid rgba(255,255,255,0.2); outline-offset: -200px;}
### 暗影能够增加多个暗影能够增加多个，且没有数量限度，也就是说能够用暗影克隆出无数个形态，这种多暗影写法只须要在前面持续叠加暗影参数即可，用逗号 (,) 分隔css.moreShadow{width: 50px; height: 50px; background-color: #80c342; margin: 50px; border-radius: 50%; box-shadow: 0px -40px 0px -20px #2d52a4,0px 40px 0px -20px #7c9bd0,40px 0px 0px -20px #c7d8f0,-40px 0px 0px -20px #4d6bb3;}
能够用多暗影个性实现加载图标，绘制四周的圆形，让它旋转起来即可。
### 暗影实现 3D 弹性按钮暗影实现 3d 按钮，点击的时候按钮下压，松开鼠标按钮回弹。css.button3D{width:80px; height:30px; border: 1px solid #80c342; text-align: center; line-height: 30px; background-color: #b7d69a; box-shadow: 1px 1px 0px 0px #b7d69a,2px 2px 0px 0px #b7d69a,3px 3px 0px 0px #b7d69a;}/*active 点击事件 */.button3D:active{translate : 1px 1px; box-shadow: 1px 1px 0px 0px #b7d69a,2px 2px 0px 0px #b7d69a;}三个 box-shadow 别离累加 1px，看起来像完满连接的3D 暗影，通过 translate 将激活的按钮 x 和y轴平移 1px，因为地位挪动了，暗影也会随着挪动1px，所以缩小最外层3px 的暗影，看起来暗影没有动，按钮动了。
暗影个性 1、内外暗影的光源都是统一的，左上角光源 2、不占位，暗影跟边框不同，边框实在占位，1px 边框就是给盒子增加 1px 的大小，而暗影是不会影响盒子大小的。3、暗影能够增加多个，每个暗影都能够独自设置 xy 轴偏移度，以及含糊、大小、色彩，相当于一个 box 能够叠加多个色彩成果。
案例源码：https://gitee.com/wang_fan_w/css-diary 如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~box-shadow 在实现案例之前先理解 css 的暗影属性 box-shadow，该属性能够为盒子设置暗影，它有五个参数，X 轴偏移量、Y 轴偏移量、含糊半径、扩散半径和色彩。box-shadow 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow 假如给一个盒子设置暗影：.shadowBox{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: #80c342;
box-shadow: 10px 10px 10px 10px black; /** x 轴 y 轴 含糊度 大小 色彩 */}
x 轴左偏移 10px，y 轴下偏移 10px，含糊 10px，放大 10px，色彩为彩色，成果如下：
下面是设置外暗影的，内暗影只须要在属性前增加 inset 即可 box-shadow: inset 10px 10px 10px 10px black;
如果没有指定 inset，默认暗影在边框外，即暗影向外扩散。应用 inset 关键字会使得暗影落在盒子外部，这样看起来就像是内容被压低了。此时暗影会在边框之内 (即便是通明边框）、背景之上、内容之下。内暗影和外暗影的用法统一，暗影的根底用法到这里解释结束。上面咱们来看一下暗影的一下其余的利用：不占位利用暗影跟边框不同，边框实在占位，1px 边框就是给盒子增加 1px 的大小，而暗影是不会影响盒子大小的。用过 ui 框架的搭档都晓得，这些框架个别都会提供几个按钮款式，大略分为红、蓝、黄、白，不同按钮色彩有不同的利用成果，其中有一个非凡的红色按钮，它的边框是黑的，大小和其余按钮统一，明明边框会影响 box 理论大小，然而它的按钮大小却和其余按钮时统一的，这里就能够用暗影实现，通过更改暗影的含糊成果让暗影变为边线，从而实现边框成果。<div class=”insetBtn”> 失常 </div>
.insetBtn{
background-color: #fff;
box-shadow: inset 0px 0px 0px 1px #333333;}
应用内暗影，暗影含糊度为 0（不含糊），扩充 1px，成果如下：
暗影层级在文字之下暗影的层级是在文字之下的，而不影响文字，能够通过该个性实现一些特殊效果，例如：应用内暗影实现鼠标移入，以后按钮高亮的提醒性能，让用户晓得以后选的是哪一个。.primary{
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 5px;}
.primary:hover{
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);}
box-shadow 是无奈笼罩 img 元素的，因为 img 层级比 box-shadow 高，如果想要实现笼罩 img 元素能够用 outline 边框偏移解决，如下.insetImg:hover{
outline: 200px solid rgba(255,255,255,0.2);
outline-offset: -200px;}
暗影能够增加多个暗影能够增加多个，且没有数量限度，也就是说能够用暗影克隆出无数个形态，这种多暗影写法只须要在前面持续叠加暗影参数即可，用逗号 (,) 分隔.moreShadow{
width: 50px;
height: 50px;
background-color: #80c342;
margin: 50px;
border-radius: 50%;
box-shadow: 0px -40px 0px -20px #2d52a4,0px 40px 0px -20px #7c9bd0,40px 0px 0px -20px #c7d8f0,-40px 0px 0px -20px #4d6bb3;}
能够用多暗影个性实现加载图标，绘制四周的圆形，让它旋转起来即可。
暗影实现 3D 弹性按钮暗影实现 3d 按钮，点击的时候按钮下压，松开鼠标按钮回弹。.button3D{
width:80px;
height:30px;
border: 1px solid #80c342;
text-align: center;
line-height: 30px;
background-color: #b7d69a;
box-shadow: 1px 1px 0px 0px #b7d69a,2px 2px 0px 0px #b7d69a,3px 3px 0px 0px #b7d69a;}
/active 点击事件/
.button3D:active{
translate : 1px 1px;
box-shadow: 1px 1px 0px 0px #b7d69a,2px 2px 0px 0px #b7d69a;}
三个 box-shadow 别离累加 1px，看起来像完满连接的 3D 暗影，通过 translate 将激活的按钮 x 和 y 轴平移 1px，因为地位挪动了，暗影也会随着挪动 1px，所以缩小最外层 3px 的暗影，看起来暗影没有动，按钮动了。
暗影个性 1、内外暗影的光源都是统一的，左上角光源 2、不占位，暗影跟边框不同，边框实在占位，1px 边框就是给盒子增加 1px 的大小，而暗影是不会影响盒子大小的。3、暗影能够增加多个，每个暗影都能够独自设置 xy 轴偏移度，以及含糊、大小、色彩，相当于一个 box 能够叠加多个色彩成果。案例源码：https://gitee.com/wang_fan_w/css-diary 如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~Markdown 已选中 3168 字数 124 行数 以后行 124, 当前列 26HTML 2226 字数 77 段落视频
