开发者学堂课程【零基础学前端 HTML+CSS：阴影】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5151
阴影
内容介绍
一、图像中阴影的介绍
二、图像中创建阴影效果的操作示例
一、图像中阴影的介绍
#在 CSS3 中，box-shadow 用于向方框添加阴影#box-shadow:h-shadow v-shadow blur spread color inset;
#box-shadow:0px 1px 3px rgba(0,0,0,.35); //支持半透明
值 |
概述 |
h-shadow |
必需 水平阴景拍的位置。允许负值 |
v-shadow |
必需 垂直阴景拍的位置。允许负值 |
blur |
可选 模糊距离 |
spread |
可选 阴景的尺寸 |
color |
可选 阴景治颜色。请参阅CSS颜色值 |
inset |
可选 将外部阴影 ( outset ) 改为内部阴影 |
//阴影可以单独设置，与圆角不冲突
//阴影颜色的值以及尺寸都可以进行选择
二、图像中创建阴影效果的操作示例
代码示例：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title></title>
</head>
<style>
#box{
width:300px; //宽
height:300px; //高
background:#b3d4fc; //背景
border:1px #222222;//不会影响 border，相互不影响
box-shadow:1px 1px 3px rgba(0,0,0,.8); //兼容语法
}
</style>
<body>
<div id=”box”>阴影</div>
</body>
</html>
呈现效果如下：
//阴影效果创建成功
