1、box-shadow这个属性有6个参数可设置,使用的时候比较少用,每次使用的时候都会忘记,故写此文作记录。
样式:
1 /*1.添加此属性添加阴影*/2 box-shadow: 0 0 10px 10px blue;3 /*box-shadow: h-shadow v-shadow blur spread color inset;*/4 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离 ?4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/
全部代码:
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<style type="text/css"> 7 ????????????#box{ 8 ????????????????height: 100px; 9 ????????????????width: 100px;10 ????????????????border: 2px solid black; ???11 ????????????????12 ????????????????/*1.添加此属性添加阴影*/13 ????????????????box-shadow: 0 0 10px 10px blue;14 ????????????????/*box-shadow: h-shadow v-shadow blur spread color inset;*/15 ????????????????/*三个参数:1.垂直距离 2.水平距离 3.模糊距离 ?4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/16 ????????????????17 ????????????????18 ????????????????19 ????????????????margin: 100px auto;20 ????????????}21 ????????</style>22 ????</head>23 ????<body>24 ????????<div id="box"></div>25 ????</body>26 </html>
实现如下的效果图:
css3_box-shadow使用记录
原文地址:https://www.cnblogs.com/wush-1215/p/8652506.html