CSS圆角样式

CSS圆角：

 1 /*纯css，设置图片圆角*/
 2     #top2 {
 3         margin-left:20px;
 4         padding:10px; width:600px; height:300px;
 5         border: 5px solid #ff6600;
 6         -moz-border-radius: 15px;      /* Gecko browsers */
 7         -webkit-border-radius: 15px;   /* Webkit browsers */
 8         border-radius:15px;            /* W3C syntax */
 9         /*
10         •-moz(例如 -moz-border-radius)用于Firefox
11         •-webkit(例如：-webkit-border-radius)用于Safari和Chrome。
12         */
13         }
14    
15 
16     /*设置图片圆角，纯css*/  
17     #cr2{margin-left:190px;width:181px;height:260px;}
18     #cr2 .cr2-c {
19     padding-top:10px;width:300px; height:170px;
20     background:#FC9; 
21     -moz-border-radius: 15px;
22     -webkit-border-radius: 15px;
23     border-radius:15px;
24     }

html:

 <div id="top2">

</div>

 

<div id="cr2">
            <h3>2.图片不限长和宽</h3>
            
                <div class="cr2-c">
                <p>有多少爱可以重来</p>
                <p>迪克牛仔</p>
                </div>
</div>

 

posted @ 2014-11-20 18:10  sunshine-habit  阅读(172)  评论(0)    收藏  举报