圆角边框，盒子阴影，文字阴影

最新推荐文章于 2025-12-12 13:39:43 发布

原创最新推荐文章于 2025-12-12 13:39:43 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5

圆角边框:

想做圆形就是将lenght长度设置为正方形边框一半；

圆角矩形：就是将lenght长度设置为矩形height的一半；

盒子阴影：

box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);

阴影不占用空间，不影响其他盒子排列；

文字阴影：

成果展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li {
			list-style: none;
			/*这是去掉li前面得小圆点*/
		}
		body {
			/*background-color: #ebebeb;*/
			background-color: transparent;
		}
		div {
			width: 600px;
			height: 200px;
			background-color: pink;
			margin: 180px auto;
			text-align: center;
			line-height: 200px;
			box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);/*这是设置盒子阴影*/
			color: skyblue;
			font-size: 30px;
			font-weight: 700px;
			text-shadow: 10px 10px 8px rgba(0,0,0,.4);/*这是设置文字阴影*/
			border-radius: 200px;/*圆角边框*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<div>
		你是阴影，我是火影！
	</div>
</body>
</html>