CSS3如何实现圆角边框

在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。
例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下：

效果图：

下面对border-radius具体细节进行介绍：
语法：border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有四种写法：
（1）当border-radius只有一个属性值时，表示盒子的四个角都是半径为该值的圆角。
例如：border-radius:5px;表示该盒子四个角都为半径为5px的圆角。

当border-radius属性值为50%时：
当盒子宽高相同时，此时盒子为圆形；
当盒子宽高不同时，此时盒子为椭圆形。
（2）当border-radius属性值为两个时，第一个值表示左上角和右下角半径为该值，第二个值表示右上角和左下角半径为该值。
例如：border-radius:10px 20px;
第一个值表示左上角和右下角半径为10px，第二个值表示右上角和左下角半径为20px的圆角。
（3）border-radius属性值为4个值时，这四个值按顺序分别表示的角为左上右上右下左下。
例如：border-radius:10px 20px 30px 40px；这四个值按顺序分别表示的角为左上角为半径10px的圆角右上角为半径20px的圆角右下角为半径为30px的圆角左下角为半径40px的圆角。
（4）可以单独对一个角设置为圆角：
左下角：border-bottom-left-radius:10px;
右下角：border-bottom-right-radius:10px;
左上角：border-top-left-radius:10px;
右上角：border-top-right-radius:10px;

注意事项

在设置对象为圆形的时候，如果使用了border、padding等情况时，对象的实际显示宽高已经不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，可能达不到预期的真正的圆形的效果。
例如：
Div样式如下时：

此时效果：

解决方案：

方法1：可以通过设置百分比50%的方式来解决这一情况

效果：

方法2：计算一下实际的高度再来设置border-radius的数值。上面这个例子，div实际的宽高应该是100 + 20 * 2 = 140px，所以border-radius应该设置为70px

效果：

浏览器支持

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

CSS3如何实现DIV圆角边框相关推荐

div圆角边框,左上角悬浮标题,边框阴影效果
第一次css技术,谢谢! <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
html div 圆角边框,div圆角边框
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
【使用bootstrap为div设置边框颜色】
官方地址 https://getbootstrap.com/docs/4.4/utilities/borders/ 其他文档地址菜鸟教程 https://www.runoob.com/bootstr ...
html盒子圆角属性,CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式,可以将盒子变为圆角. border-radius 用于设置元素的外边框圆角. 语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正 ...
css圆角边框、文字、盒子阴影
文章目录圆角边框.文字.盒子阴影圆角边框盒子阴影文字阴影圆角边框.文字.盒子阴影圆角边框 css3中新增了圆角边框样式 border-radius(半径)属性用于设置元素的外边框圆角参数 ...
CSS3中的圆角边框属性详解(border-radius属性)
实例向 div 元素添加圆角边框: div { border:2px solid; border-radius:25px; } 页面底部有更多实例. 浏览器支持 IE Firefox Chrome ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
css如何实现边框圆角阴影,css3圆角边框和边框阴影示例
border-radius向元素添加圆角边框,css3中的.ie9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
html阴影和圆角边框,css3圆角边框和边框阴影示例
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
html 画圆的阴影,CSS3(1)---圆角边框、边框阴影
圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了C ...

CSS3如何实现DIV圆角边框

CSS3如何实现圆角边框

定义和用法

注意事项

解决方案：

CSS3如何实现DIV圆角边框相关推荐

最新文章

热门文章