css阴影怎么写插图

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、css文本阴影的写法

在css中，可使用text-shadow属性来实现带阴影的文本，text-shadow 属性应用于阴影文本。

语法

text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

效果图：

1.png

2、css边框阴影的写法

在css中，可使用box-shadow属性实现边框阴影效果，box-shadow属性可以设置一个或多个下拉阴影的框。

语法

box-shadow: h-shadow v-shadow blur spread color inset;
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

效果图：

2.png

（学习视频分享：css视频教程）

以上就是css阴影怎么写的详细内容，更多请关注亿码酷站其它相关文章！



css阴影怎么写
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

下载声明：
  • 本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!
    • 版权声明：
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益，请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。
    • 免责声明：
  • 您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！