css3 - 铱哥的趣屋

css3设置圆角div

发布时间：2012-11-30 No Comments

div{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
}

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
		ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
		ul.polaroids li { display: inline; }
		ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
		ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
		ul.polaroids a:after { content: attr(title); }
		ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
		ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
		ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
		ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
		ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
		ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
		ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
    </style>
</head><body><ul class="polaroids"><li><a href="http://www.flickr.com/photos/zurbinc/3971679981/" data-ke-src="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland！"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="Roeland！" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3985295842/" data-ke-src="http://www.flickr.com/photos/zurbinc/3985295842/" title="讨论"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="讨论" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3993123611/" data-ke-src="http://www.flickr.com/photos/zurbinc/3993123611/" title="丰盛的笑"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="丰盛的笑" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001991326/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001991326/" title="邪马特编码"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="邪马特编码" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001992350/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001992350/" title="阿曼达刺眼... ..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="阿曼达刺眼... ..." /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001229589/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001229589/" title="涂鸦乱画..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="涂鸦" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3957026139/" data-ke-src="http://www.flickr.com/photos/zurbinc/3957026139/" title="该Dougernaut"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="该Dougernaut" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3428777148/" data-ke-src="http://www.flickr.com/photos/zurbinc/3428777148/" title="我看你！"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="我看你！" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799720274/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799720274/" title="石坚高尔夫球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="石坚高尔夫球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799719490/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799719490/" title="滚球球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="滚球球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3888563172/" data-ke-src="http://www.flickr.com/photos/zurbinc/3888563172/" title="鲍里斯“塔图”"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="鲍里斯“塔图”" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3427934527/" data-ke-src="http://www.flickr.com/photos/zurbinc/3427934527/" title="运动鞋和高跟鞋"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="运动鞋和高跟鞋" /> </a> </li></ul></body></html>

提示：您可以先修改部分代码再运行

铱哥的趣屋

css3设置圆角div

歪歪扭扭的图片展示.

最新文章 RSS

热门文章

最近回复 RSS

热门标签

分类

归档

其它