【CSS】6-css阴影样式

关注

原创最新推荐文章于 2026-05-30 10:10:35 发布 733 阅读 AI 写同款· GEO 优化 ›

深入了解CSS阴影效果：box-shadow属性详解与实践本课程将全面介绍CSS中的box-shadow属性，该属性用于为元素添加阴影效果。通过详细解释语法和参数的含义，学习者将了解如何控制阴影的大小、颜色、模糊度、偏移量和内外阴影等。通过丰富的示例和实践，学习者将掌握如何创建各种不同的阴影效果，并能够灵活应用于自己的项目中。无论是想为网页元素增添层次感、增强视觉效果，还是希望提升设计技巧，本课程都将为你提供深入了解和运用box-shadow属性的知识和技能。阅读详情

6-css阴影样式

1.文字阴影：
    text-shadow: x轴偏移量，y轴偏移量，模糊半径，颜色
    
2.盒子阴影：
    box-shadow:x轴偏移量，y轴偏移量，模糊半径，颜色
    
3.鼠标移入变手型
    cursor:pointer;

实例：

<style type="text/css">
	#div1 {
		width: 300px;
		height: 300px;
		border: solid 2px green;
		
		margin: 50px auto;
		
		font-size: 30px;
		font-weight: bolder;
		text-align: center;
		line-height: 300px;
		
		/* 文字阴影 */
		text-shadow: 20px 10px 6px green;
		
		/* 盒子阴影 */
		/* box-shadow: 0px 0px 20px green; */
		
		/* 鼠标移入变手型 */
		cursor: pointer;
	}
	
	#div1:hover {
		box-shadow: 0px 0px 20px green;
	}
</style>
</head>
<body>
	
	<div id="div1">
		HELLO WORLD
	</div>
	
</body>