【CSS】6-css阴影样式

JeffHan^_^

于 2022-07-27 08:39:44 发布

阅读量651

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS教程文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/Jeffhan_java/article/details/125993237

CSS教程专栏收录该内容

12 篇文章

订阅专栏

本文介绍CSS中的文字阴影(text-shadow)和盒子阴影(box-shadow)用法，以及鼠标悬停触发的改变形状效果(cursor:pointer)，并通过实例演示如何应用在网页元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>