如何制作CSS圆角边框，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
CSS3的border-radius
利用DIV+CSS生成圆角边框，在很多情况下都会用到，目前DIV+CSS的圆角边框，一种是利用CSS3，一种是利用布局模拟出圆角。
先说第一种，利用CSS3，前提是您的浏览器必须支持CSS3，Firefox3是支持的，我看到的很多网站圆角也是利用CSS3直接生成的，无非就是ie下依然显示直角而已，让ie固执去吧。
利用CSS3，你可以指定4个角都是圆角，或者某一个角是圆角非常方便，代码如下：
CSS Code复制内容到剪贴板
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#fff;
}
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
color:#fff;
}<div id="round"><h2>圆角边框</h2></div> <div id="indie"><h2>部分圆角</h2></div>
不使用 border-radius 实现圆角
CSS3中，利用属性 border-radius 可以很方便的设置出圆角矩形，但是在IE8及以下版本却不支持这个属性，为了在旧版本的浏览器中实现宽高自适应的圆角矩形，可以采用以下三种方法。
1.使用背景图片制作圆角
使用背景图片制作宽、高自适应的圆角矩形，首先需要切出4个圆角图片，然后把4个圆角图片放在矩形的四个角上就大功告成了，这一共需要5个div标签，1个容器div和4个圆角背景div。是不是很好理解。
具体实现来说，需要注意一些细节。对于矩形容器div：
上下内边距的大小至少设置为圆角的高度。
position设置为相对定位。
放置内容。
对于4个圆角背景div：
分别设置各个圆角背景图片。
绝对定位于容器矩形的四个角。
需要设置宽高值才能显示背景图片。
假设圆角图片的宽高是5px，具体代码如下：
XML/HTML Code复制内容到剪贴板
<div class="content"> <div class="top-left"></div> <div class="top-right"></div> <div class="btm-left"></div> <div class="btm-right"></div> </div>
CSS Code复制内容到剪贴板
.content {
position: relative;
padding: 5px;
}
.top-left,
.top-rightright,
.btm-left,
.btm-rightright {
position: absolute;
width: 5px;
height: 5px;
}
.top-left {
top: 0;
left: 0;
background: url(imgs/top-left.png) no-repeat top left;
}
.top-rightright {
top: 0;
rightright: 0;
background: url(imgs/top-rightright.png) no-repeat top left;
}
.btm-left {
bottombottom: 0;
left: 0;
background: url(imgs/btm-left.png) no-repeat top left;
}
.btm-rightright {
bottombottom: 0;
rightright: 0;
background: url(imgs/btm-rightright.png) no-repeat top left;
}2.纯 CSS+div 制作圆角矩形
这种方法的原理是利用像素点绘制弧线来模拟圆角。简单起见，这里我用圆角半径为3px的例子讲解，其中圆角矩形的背景色为粉色，矩形的边框为黑色。左上角圆角放大后如下图所示：
这里矩形上下各需要3个高度为1px、垂直罗在一起的div才能模拟出圆角。具体实现如下：
第一个div就是上面图中矩形的黑色上边框，因为模拟的圆角半径为3px，所以该div的左右外边距设为3px，背景色设为黑色。
第二个div的左右外边距设为2px，左右边框为1px的黑线，背景色为粉色。
第三个div的左右外边距设为1px，左右边框为1px的黑线，背景色为粉色。
圆角矩形下面的两个圆角是以上三个div反序排列。
矩形内容区域的div只需要设置左右边框和背景色即可。
具体代码如下
XML/HTML Code复制内容到剪贴板
<div class="wrapper"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="content">aaaaa</div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div>
CSS Code复制内容到剪贴板
.r1 {
height: 1px;
margin: 0 3px;
background-color: #111;
}
.r2 {
height: 1px;
margin: 0 2px;
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
.r3 {
height: 1px;
margin: 0 1px;
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
.content {
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}此方法优缺点分析：
不使用背景图片，减少了HTTP请求数。
后期维护性好，但是圆角矩形像素增加，无意义的div代码将成倍增加。
实现的圆角矩形有局限性。
只能实现纯色圆角。
3.使用CSS border 画出梯形模拟圆角
通过设置border属性，可以得到梯形和三角形，效果如下图所示：
当给div的四个边框设置比较大的宽度值时，就能得到四个梯形，如上图中的第一个图案；
在此基础上，当把div的高度值设为0后，就能得到梯形和等腰三角形了，如上图中的第二个图案；
当把div的宽、高都设为0，且只设置上、左的两个边框时，就能得到两个直角三角形，图中的第三个图案就是这种情况；
在此基础上，把其中的一个边框的颜色设置为透明，就能像第四个图案一样得到一个直角三角形。
代码如下：
XML/HTML Code复制内容到剪贴板
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS Code复制内容到剪贴板
.box1 {
height: 20px;
width: 20px;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid yellow;
}
.box2 {
height: 0;
width: 20px;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid yellow;
}
.box3 {
height: 0;
width: 0;
border-top: 50px solid red;
/* border-right: 20px solid green; */
/* border-bottom: 20px solid blue; */
border-left: 50px solid yellow;
}
.box4 {
height: 0;
width: 0;
border-top: 50px solid red;
/* border-right: 20px solid green; */
/* border-bottom: 20px solid blue; */
border-left: 50px solid transparent;
}已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：
具体代码如下：
XML/HTML Code复制内容到剪贴板
<div class="wrapper">
<div class="top"></div>
<div class="content">
<p>利用border画出梯形，模拟圆角</p>
</div>
<div class="bottom"></div>
</div>
CSS Code复制内容到剪贴板
div {
box-sizing: border-box;
}
.top {
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid #111;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.bottombottom {
height: 0;
border-top: 3px solid #111;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.content {
color: #fff;
background-color: #111;
}
.wrapper {
width: 200px;
margin: 0 auto;
}关于如何制作CSS圆角边框问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
