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

CSS3实现曲线阴影和翘边阴影

2016-04-08 13:38 393 查看
效果图如下：



index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现曲线阴影和翘边阴影</title>
<style>
/*源于imooc的学习*/
body {
font-family: "微软雅黑", "Microsoft YaHei";
font-size: 20px;
}
body, ul, li, h1 {
padding: 0;
margin: 0;
}
ul {
list-style: none outside none;
}
.wrap {
width: 70%;
height: 200px;
margin: 50px auto;
background-color: #fff;
}
.wrap h1 {
font-size: 40px;
text-align: center;
line-height: 200px;
}

/**
* box-shadow
* 功能：添加一个或多个阴影
* 语法：box-shadow: h-shadow v-shadow blur spread color inset;
* 参数：
*      h-shadow（必需）：水平阴影的位置。允许负值。
*      v-shadow（必需）：垂直阴影的位置。允许负值。
*      blur（可选）：模糊程度，值越大越模糊。
*      spread（可选）：阴影的尺寸。一般不推荐设置。
*      color（可选）：阴影的颜色。请参阅CSS颜色值。
*      inset（可选）：将外部阴影（outset）改为内部阴影。
* 浏览器兼容：
*      IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性。
*/
.effect {
position: relative;
/*box-shadow: h-shadow v-shadow blur color [inset];*/
-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;
-o-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;
}
/**
* :after选择器：在被选元素的内容后面插入内容
* :before选择器：在备选元素额内容后面插入内容
* 说明：需要使用content属性来指定要插入的内容
* 浏览器兼容：
*      对于IE8及更早版本的:after，必须声明<!DOCTYPE>。
*
* content属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的
* 框类型可以用属性display控制。
*/
.effect::after,.effect::before {
content: '';
background: #f00;
position: absolute;
top: 50%;
bottom: 0;
left: 20px;
right: 20px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.8);
box-shadow: 0 0 20px rgba(0,0,0,0.8);

border-radius: 100px/10px; /*水平半径/垂直半径*/
z-index: -1;
}

.box {
width: 980px;
height: auto;
clear: both;
overflow: hidden;
margin: 20px auto;
}
.box li {
width: 300px;
height: 210px;
float: left;
margin: 20px 10px;
border: 2px solid #EFEFEF;

-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;

position: relative;
background-color: #FFF;
}
.box li img {
display: block;
width: 290px;
height: 200px;
margin: 5px;
}

.box li:before {
content: '';
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 8px;
/*background-color: #F00;*/
background-color: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);

/**
* transform
* 功能：向元素应用2D或3D转换
* 语法：transform: none|transform-functions
* 参数：
*      skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换
*      skewX(angle) 定义沿着X轴的2D倾斜转换。
*      skewY(angle) 定义沿着y轴的2D倾斜转换。
* 浏览器兼容：
*      Internet Explorer 9支持替代的-ms-transform属性（仅适用于2D转换）
*      Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
*      Opera只支持2D转换。
*/
-webkit-transform: skewX(-11deg) rotate(-4deg);
-moz-transform: skewX(-11deg) rotate(-4deg);
-ms-transform: skewX(-11deg) rotate(-4deg);
-o-transform: skewX(-11deg) rotate(-4deg);
transform: skewX(-11deg) rotate(-4deg);

z-index: -1;
}

.box li:after {
content: '';
position: absolute;
width: 90%;
height: 80%;
right: 20px;
bottom: 8px;
background-color: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);

-webkit-transform: skewX(11deg) rotate(4deg);
-moz-transform: skewX(11deg) rotate(4deg);
-ms-transform: skewX(11deg) rotate(4deg);
-o-transform: skewX(11deg) rotate(4deg);
transform: skewX(11deg) rotate(4deg);

z-index: -1;
}
</style>
</head>
<body>
<div class="wrap effect">
<h1>Shadow Effect</h1>
</div>
<ul class="box">
<li><img src="images/1.jpg" alt="1.jpg"></li>
<li><img src="images/2.jpg" alt="2.jpg"></li>
<li><img src="images/3.jpg" alt="3.jpg"></li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航