一、理论:
1.阴影层级:边框>内阴影>背景图片>背景色>外阴影
2.多层阴影:每层之间用逗号隔开
3.box-shadow兼容性:
a.在现代浏览器新版本无须加前缀,但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选,可制作出圆润的阴影效果
二、实践:
1.阴影层级:边框>内阴影>背景图片>背景色>外阴影
2.多层阴影:每层之间用逗号隔开
3.box-shadow兼容性:
a.在现代浏览器新版本无须加前缀,但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选,可制作出圆润的阴影效果
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box-shadow{
width: 200px;
height: 100px;
border:1px solid #cccccc;
border-radius: 5px;
box-shadow: inset 3px 3px 10px #06c;
}
img {
width: 200px;
height: 100px;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: inset 3px 3px 10px #06c;
}
</style>
</head>
<