css里面的边框阴影box-shadow

乐之者java

于 2020-05-01 12:34:52 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105876500

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

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>
</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>