Chinaunix首页 | 论坛 | 博客
  • 博客访问: 847045
  • 博文数量: 366
  • 博客积分: 10267
  • 博客等级: 上将
  • 技术积分: 4290
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 14:04
文章分类

全部博文(366)

文章存档

2012年(366)

分类: 系统运维

2012-05-08 15:44:45

复制代码
.curved_box { display: inline-block; *display: inline; width: 200px; height: 248px; margin: 20px; background-color: #fff; border: 1px solid #eee; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; position: relative; *zoom: 1; } .curved_box:before { -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); left: 15px; } .curved_box:after { -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); right: 15px; } .curved_box:before, .curved_box:after { width: 75%; height:50%; content: ' '; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 10px; z-index: -1; }
复制代码
<div class="curved_box">div>

关键思路是以下三块:

.curved_box:before; .curved_box:after;
{content: ' '}

curved_box, curved_box:before, curved_box:after一共三个, curved_box:before, curved_box:after位于curved_box的“下面”(z-index: -1);

1.设伪类before和after,结合content属性。就相当于(注意是相当于,不是真的,可以这样理解)创建了两个盒子,其内容是content里面的内容,现在为空"".

2.定义这两个“盒子”的:

  置位:(position: absolute;z-index: -1;bottom: 10px;)

  形状:(transform: skew(15deg) rotate(6deg);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);)

  大小:(width: 75%; height:50%;)
以下是效果图:

 (大家可以试着改变:width: 75%; height:50%; 这两个属性值,就会发现下面确实有两个“盒子”,或者删除一个“盒子”curved_box:before的所有样式);
阅读(1490) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~