3.10 (案例) css3盒阴影效果
2017-06-07 本文已影响0人
柒月柒日晴7
css3盒阴影效果展示.png
css3盒阴影效果展示.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
del,ins,a{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
/*CSS reset*/
body{margin:0 auto;}
p{color:#666;
margin:100px auto;
padding:40px 0;
text-align:center;
height:50px;
width:380px;
font-size:24px;
font-weight:bold;
font-family:Britannic Bold;
background:#ccccff;
}
.p1{
margin:100px auto;
padding:40px 0;
text-align:center;
height:50px;
width:380px;
font-size:44px;
font-weight:bold;
font-family:Britannic Bold;
border-radius:230px/50px;
background:#ccccff;
box-shadow:1px -1px 0px 0px rgba(153,153,238,0.1),2px -2px 0px 0px rgba(153,153,238,0.1),3px -3px 0px 0px rgba(153,153,238,0.1),4px -4px 0px 0px rgba(153,153,238,0.1),5px -5px 0px 0px rgba(153,153,238,0.1),6px -6px 0px 0px rgba(153,153,238,0.1),7px -7px 0px 0px rgba(153,153,238,0.1),8px -8px 0px 0px rgba(153,153,238,0.1),9px -9px 0px 0px rgba(153,153,238,0.1),10px -10px 0px 0px rgba(153,153,238,0.1),11px -11px 0px 0px rgba(153,153,238,0.1),12px -12px 0px 0px rgba(153,153,238,0.1),13px -13px 0px 0px rgba(153,153,238,0.1),14px -14px 0px 0px rgba(153,153,238,0.1),15px -15px 0px 0px rgba(153,153,238,0.1);
}
.p2{
margin:100px auto;
padding:40px 0;
text-align:center;
height:50px;
width:380px;
font-size:44px;
font-weight:bold;
font-family:Britannic Bold;
border-radius:230px/50px;
background:#ccccff;
box-shadow:0px 0px 5px 5px rgba(153,153,238,1);
}
.p3{
margin:100px auto;
padding:40px 0;
text-align:center;
height:20px;
width:180px;
font-size:24px;
font-weight:bold;
font-family:Britannic Bold;
background:#ccccff;
box-shadow:5px 0px 5px 5px rgba(153,153,238,1);
}
.p4{
box-shadow:
0px 0px 0px 2px rgba(255,0,0,1),
0px 0px 0px 4px rgba(255,127,0,1),
0px 0px 0px 6px rgba(255,255,0,1),
0px 0px 0px 8px rgba(0,255,0,1),
0px 0px 0px 10px rgba(0,255,255,1),
0px 0px 0px 12px rgba(0,0,255,1),
0px 0px 0px 14px rgba(255,0,255,1);
}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<p class='p1'>Box Shadow</p>
<p class='p2'>Box Shadow</p>
<p class='p3'>Box Shadow</p>
<p class='p4'>Border Colors ?/Box Shadow ?</p>
</body>
</html>
