1.css3阴影用到的知识点：阴影box-shadow和插入：after before
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box case-content">
<h1>卡片阴影效果</h1>
</div>
</body>
</html>
CSS部分：
<style type="text/css">
.box {
width: 70%;
height: 200px;
margin: 50px auto;
background-color: #fff;
}
.box h1 {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.case-content {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
} .case-content:before ,.case-content:after{
z-index: -1;
content: "";
background-color: #foo;
position: absolute;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
box-shadow: 0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
}
备注：
1. css卡片阴影效果用到两个伪元素:after、before.
(1)、“伪元素”，顾名思义。
它创建了一个虚假的元素，并插入到目标元素内容之前或之后；
(2)、伪元素如果没有设置“content”属性，伪元素是无用的；
浏览器支持:before 和 :after 伪元素栈，像这样：
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 几乎所有的移动浏览器。
- 唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。
2.inset用法:
(1)、inset是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）