shadow阴影属性
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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- |
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>
以上是关于shadow阴影属性的主要内容，如果未能解决你的问题，请参考以下文章