码迷,mamicode.com
首页 > Web开发 > 详细

css3选择器-边框-阴影效果

时间:2016-06-27 19:56:43      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒阴影</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="reset.css">
<style type="text/css">
p{color:#666;
  margin:20px auto;
  padding:40px 0;
  text-align:center;
  height:50px;
  width:380px;
  font-size:26px;
  font-weight:bold;
  background:#ccccff;
/*font-family:Britannic Bold;*/
}
.p1{
  border-radius:230px/50px;
  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{
  border-radius:230px/50px;
  box-shadow:0px 0px 2px 3px rgba(153,153,238,1),0px 0px 5px 7px rgba(153,153,238,0.4);
}
.p3{
  box-shadow:5px 0px 0px 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>
</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>

技术分享

css3选择器-边框-阴影效果

标签:

原文地址:http://www.cnblogs.com/patriot/p/5620812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!