CSS3边框阴影,折角效果演示
来源:互联网 发布:淘宝商家入住需要什么 编辑:程序博客网 时间:2024/05/17 08:44
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3边框阴影,折角效果演示</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;}
pre{max-height:200px;overflow:auto;}
div.demo {overflow:auto;}
.box {
width: 300px;
min-height: 300px;
margin: 30px;
display: inline-block;
background: #fff;
border: 1px solid #ccc;
position:relative;
}
.box p {
margin: 30px;
color: #aaa;
outline: none;
}
/*=========Box1===========*/
.box1{
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
/*设置Box的阴影效果*/
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
/*制作右下脚折边效果*/
-moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
-webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
border-radius: 0 0 6px 0 / 0 0 50px 0;
}
/*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/
.box1:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px) skew(0deg,30deg) rotate(-25deg);
-moz-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
-o-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
}
/*使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置*/
.box1:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
-o-transform: rotate(7deg) translate(20px,25px) skew(20deg);
transform: rotate(7deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="box box1"><p>Box1</p></div>
</div>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3边框阴影,折角效果演示</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;}
pre{max-height:200px;overflow:auto;}
div.demo {overflow:auto;}
.box {
width: 300px;
min-height: 300px;
margin: 30px;
display: inline-block;
background: #fff;
border: 1px solid #ccc;
position:relative;
}
.box p {
margin: 30px;
color: #aaa;
outline: none;
}
/*=========Box1===========*/
.box1{
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
/*设置Box的阴影效果*/
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
/*制作右下脚折边效果*/
-moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
-webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
border-radius: 0 0 6px 0 / 0 0 50px 0;
}
/*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/
.box1:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px) skew(0deg,30deg) rotate(-25deg);
-moz-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
-o-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
}
/*使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置*/
.box1:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
-o-transform: rotate(7deg) translate(20px,25px) skew(20deg);
transform: rotate(7deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="box box1"><p>Box1</p></div>
</div>
</body>
</html>
0 0
- CSS3边框阴影,折角效果演示
- css3边框阴影效果
- css3阴影设置发光边框效果,阴影按钮
- css3-边框圆角阴影渐变
- css3边框 圆角 阴影
- CSS3 边框阴影
- css3边框外部阴影
- CSS3边框阴影
- CSS3选择器、边框、阴影
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- CSS3边框图片、边框阴影、文本阴影
- CSS3下实现边框阴影效果(下)-翘边阴影效果
- 边框为阴影效果
- CSS 边框 阴影 效果
- QT边框阴影效果
- CSS 边框 阴影 效果
- CSS3下实现边框阴影效果(上)之曲线阴影
- CSS3 (边框 圆角 阴影)
- Basic and Digest Access Authentication (rfc2617) 及HttpClient实现
- 5.1 无继承情况下的对象构造
- linux笔记之3--常用命令
- 用java下载网页
- 网页浮动图片的设置
- CSS3边框阴影,折角效果演示
- HAL层分析——初步了解HAL
- 求无向图的 边-双连通分量
- 写给自己的话
- Swift学习笔记系列——(23)泛型
- Robotium 中如何重签名
- 初探CAGradientLayer——渐变色的实现
- hdu-1814(2-SAT)
- ZOJ 1109 Language of FatMouse