shadow阴影属性

最新推荐文章于 2024-06-17 03:14:49 发布

月疯

最新推荐文章于 2024-06-17 03:14:49 发布

阅读量3.4k

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119194485

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

前缀	实例	说明
-ms-	-ma-box-shadow	Ie浏览器专属CSS属性添加-ms-
-moz-	-moz-box-shadow	所有基于Gecko引擎（Firfox）专属css属性添加-moz-
-o-	-o-box-shadow	Opera浏览器专属CSS需要添加属性-o-
-webkit-	-webkit-shadow	所有基于webkit引擎的浏览器（Chrome、Safri）专属的css需要添加-webkit-

box-shadow盒子阴影
属性值：
h-shadow:水平方向属性值，允许负值
v-shadow：垂直阴影的位置。允许负值
blur：模糊距离
spread：阴影的大小
color：阴影的颜色
inset：从外层的阴影（开始时）改变阴影内侧阴影

box-shadow:10px 10px 5px 10px #888888 inset;

第一个值10px：控制水平方向阴影

第二个值10px：控制垂直方向阴影

第三个值：5px控制阴影的模糊程度

第四个值10px：控制阴影的大小

第五个值#88888;阴影的颜色

inset：表示从外层的阴影（开始时）改变阴影内侧阴影

不加浏览器叫标准模式，添加浏览器叫兼容模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒子也叫怪异盒子</title>
		<style type="text/css">
			/*box-sizing
			属性:content-box (标准盒模型)padding和margin把外部撑大
			     border-box（怪异盒模型）padding和margin把内部撑大（用在移动端，不用再pc端）
				 
			兼容模式
			*/
		   #box{
			   width: 300px;
			   height: 200px;
			   background: #008000;
			   margin: 100px auto;
			   box-shadow: 10px 8px 52px -9px green;
			   -o-box-shadow:10px 8px 52px -9px green;
			   -ms-box-shadow:10px 8px 52px -9px green;
			   -moz-box-shadow:10px 8px 52px -9px green;
			   -webkit-box-shadow:10px 8px 52px -9px green;
		   }
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

文本的阴影：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				text-align: center;
				line-height: 300px;
				font-size: 100px;
				/* 字体加粗 */
				font-weight: bold; 
				/* text-shadow: 10px 10px 10px blue;//单阴影 */
				/* 多阴影添加 */
				text-shadow: -4px -3px 20px blue,4px 3px 20px yellow;
				
			}
		</style>
	</head>
	<body>
		<div id="box">
			我爱你
		</div>
	</body>
</html>

月疯

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
shadow阴影属性

前缀实例说明 -ms- -ma-box-shadow Ie浏览器专属CSS属性添加-ms- -moz- -moz-box-shadow 所有基于Gecko引擎（Firfox）专属css属性添加-moz- -o- -o-box-shadow Opera浏览器专属CSS需要添加属性-o- -webkit- -webkit-shadow 所有基于webkit引擎的浏览器（Chrome、Safri）专属的css需要添加-webkit-
复制链接

扫一扫

专栏目录