京东内部优惠券!扫描二维码领取!

×
京东优惠券精选

CSS3 圆角

前缀

-moz(例如 -moz-border-radius)用于Firefox

-webkit(例如:-webkit-border-radius)用于Safari和Chrome。


实例一、代码如下

<div id="round"></div>
#round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}

效果如下:

r_border_radius1.png


实例二、代码如下:

<div id="round"></div>  
#round {
    padding:10px; width:300px; height:50px;
    background:#FC9; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
}

效果如下:

r_border_radius2.png


书写顺序:

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;


通过以下视频详细了解CSS3圆角


微信扫一扫,有福利

微信关注