您的位置：首页 > Web前端 > CSS

CSS box-shadow

2016-07-25 22:35 579 查看
向 div 元素添加 box-shadow：
div
{
box-shadow: 10px 10px 5px #888888;
}


语法

box-shadow: h-shadow v-shadow blur spread color inset;

参数依次为：X轴偏移量（水平）：可以为负值

Y轴偏移量（垂直）：可以为负值

阴影模糊半径，

阴影扩散半径：可以为负值

阴影颜色，

投影方式：有外部阴影 (outset)和内阴影（inset）两种，默认外阴影
  inset为其唯一值。

添加多个阴影，用逗号分割，阴影按顺序向后排。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div阴影</title>
</head>
<style>
#main{
margin-top:200px;
margin-left:200px;
width:200px;
height:200px;
background:blue;
box-shadow:4px -40px 4px 5px red, /**/
40px 4px 4px 5px yellow,
4px 40px 4px 5px green,
-40px 0 4px 5px gray,
80px 80px 4px 5px black;
}
</style>
<body>
<div id="main"></div>
</body>
</html>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航