css设置div圆角

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaoxiangyu5/article/details/50323853

昨天去面试,面试官一上来就开始问技术方面的问题,感觉很糟糕,很多知识点只记得大概,其中面试官提到怎么设置div文圆角,当时我就蒙了,虽然我是做后台的,之前听过说把按钮设置成圆角,但那都是前台的处理,也没多个心眼百度,哎!现在吃亏了。

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。

如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。

如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。

如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

#rad
{
    background:#FC9;    
    border-radius:15px;
    padding:10px; width:300px; height:50px;
}

除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

* border-top-left-radius  
* border-top-right-radius 
* border-bottom-right-radius  
* border-bottom-left-radius
一般的浏览器都支持上述的border-radius属性,早期版本的Firefox支持-moz-border-radius属性,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

展开阅读全文

没有更多推荐了,返回首页