css⾥⾯的边框阴影box-shadow
box-shadow属性⽤来控制⽹页的阴影效果，是css3⾥⾯新增的属性。具体表现就是在我们的边框外变或者⾥⾯显⽰可控的阴影效果，如下图所⽰的这样。
可以看到，我⽤红⾊框框住的部分就是box-shadow的阴影效果。
box-shadow的⽤法与语法简介如下：
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset/outset];
h-shadow：⽔平偏移量，⽐如5px表⽰向右偏移5px，-5px则是向左偏移。
v-shadow：垂直偏移量，⽐如5px表⽰向下偏移5px，-5px则是向上偏移。
blur：英⽂原意是“模糊”的意思，这⾥代表模糊的过渡距离
spread：阴影尺⼨
color：阴影的颜⾊
inset/outset：内部阴影/外部阴影，默认是outset外部阴影。
举个例⼦：
box-shadow:2px 2px 3px #ccc;
-moz-box-shadow:2px 2px 3px #ccc;/*firefox*/
-webkit-box-shadow:2px 2px 3px #ccc;/*webkit*/
上边的例⼦表⽰向右向下2px，模糊的过渡距离是3px。如果对各个属性是什么意思还是拿捏不太准确的话，⼤家可以⾃⼰试⼀试就能真正掌握了。
下⾯的代码是上边截图案例的源代码。
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>省略号和边框阴影</title>shadow什么意思啊
</head>
<body>
<ul>
<li>⼀些⽂字不知道写点什么的⽂字</li>
<li>⼀些⽂字不知道写些什么</li>
<li>⼀些⽂字⼀些⽂字</li>
<li>⼀些⽂字</li>
</ul>
</body>
</html>
css代码：
<style>
ul{
list-style: none;
font-size: 13px;
font-family: '微软雅⿊';
color: #333;
margin: 300px auto;
text-align: center;
box-shadow:5px 5px 2px #ccc;  width: 500px;
height: 200px;
background: pink;
}
ul li{
height: 40px;
line-height: 40px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。