css设置div圆角

您所在的位置:网站首页 怎么设置边框圆角 css设置div圆角

css设置div圆角

2024-06-10 00:56| 来源: 网络整理| 查看: 265

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3