07-box-shadow.html（阴影）

最新推荐文章于 2024-06-22 17:43:07 发布

jamesge2010

最新推荐文章于 2024-06-22 17:43:07 发布

阅读量96

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/103134270

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	
	ul li{
		width: 100px;
		height: 100px;
		border: 1px solid orange;
		margin: 30px auto;
		list-style: none;
	}
	
	ul li:nth-child(1){
		/* 1.水平半径 2.垂直半径 3.模糊半径 4.扩展半径 5.颜色 */
		box-shadow: 20px 0 15px 0 green;
	}
	
	ul li:nth-child(2) {
		/* 多阴影效果 */
		box-shadow: 5px 5px 5px 0 green, 15px 15px 5px 0 red, 30px 30px 5px 0 pink;
	}
	
	ul li:nth-child(3) {
		/* 内阴影 */
		box-shadow: 0 5px 20px 0 green inset;
	}
	
	ul li:nth-child(4) {
		font-size: 50px;
		/* 文本阴影 1.水平半径 2.垂直变更 3.模糊半径 4.颜色 */ 
		text-shadow: 3px 3px 3px green, 5px 5px 5px red;
	}
	
	ul li:nth-child(5) {
		width: 500px;
		font-size: 60px;
		color: transparent;
		/* 文本边框 */
		-webkit-text-stroke: 2px blue;
	}
</style>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li>自学成才</li>
		<li>www.bingoGe.com</li>
		<li></li>
	</ul>
</body>
</html>

jamesge2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07-box-shadow.html（阴影）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>阴影</title><style type="text/css"> *{ margin: 0; padding: 0; } ul li{ width: 100px; ...
复制链接

扫一扫

专栏目录