css设置div圆角

昨天去面试,面试官一上来就开始问技术方面的问题,感觉很糟糕,很多知识点只记得大概,其中面试官提到怎么设置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即可。

  • 9
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值