Home > Article > Web Front-end > How to use CSS to achieve the effect of rounded borders
How to use CSS to achieve the effect of rounded borders
- 不言Original
- 2018-07-17 09:29:362035browse
This article mainly introduces how to use CSS to achieve the effect of rounded borders. It has a certain reference value. Now I share it with you. Friends in need can refer to it
1. CSS3 Advantages of rounded corners
The traditional rounded corner generation scheme must use multiple pictures as background patterns. The emergence of CSS3 means that we no longer have to waste time creating these images, and there are many other advantages:
* Reduce the workload of maintenance. The work of generating, updating image files, and writing web page code is no longer necessary.
* Improve web page performance. Web pages will load faster because there are no more unnecessary HTTP requests.
* Increase visual reliability. Under certain circumstances (network congestion, server error, slow network speed, etc.), the background image may fail to download, resulting in poor visual effects. This doesn't happen with CSS3.
2. border-radius property
CSS3 rounded corners only need to set one property: border-radius (meaning "border radius"). You provide a value for this property to set the radii of all four corners at the same time. All legal CSS measurements can be used: em, ex, pt, px, percentage, etc.
For example, the following is a div box:
Now set its corner radius to 15px:
border-radius: 15px;
This statement also sets the "horizontal radius" and "vertical radius" of each fillet to 15px.
Border-radius can set 1 to 4 values at the same time. If you set a value, it means that all four fillets use this value. If two values are set, it means that the upper left corner and lower right corner use the first value, and the upper right corner and lower left corner use the second value. If three values are set, it means that the first value is used for the upper left corner, the second value is used for the upper right corner and lower left corner, and the third value is used for the lower right corner. If four values are set, they correspond to the upper left corner, upper right corner, lower right corner, and lower left corner (clockwise order).
border-radius: 15px 5px;
# # border-radius: 15px 5px 25px 0px;
(The radius of the lower left corner is 0, which becomes a right angle.)
border-radius also The second set of values can be set using slashes. At this time, the first set of values represents the horizontal radius, and the second set of values represents the vertical radius. The second set of values can also set 1 to 4 values at the same time, and the application rules are the same as the first set of values.
Border-radius: 15px 5px / 3px;
border-radius: 15px 5px 25px / 3px 5px;
Border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
## 3. Single rounded corner settings
In addition to setting four rounded corners at the same time, you can also set each corner individually. Corresponding to the four corners, CSS3 provides four separate properties:
* border-top-left-radius* border-top-right-radius
* border-bottom-right-radius * border-bottom-left-radius
These four properties can be set to 1 to 2 values at the same time. If you set a value of 1, it means that the horizontal radius is equal to the vertical radius. If 2 values are set, the first value represents the horizontal radius and the second value represents the vertical radius.
4. Browser support
IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4. All support the above border-radius attribute. Early versions of Safari and Chrome support the -webkit-border-radius attribute, early versions This version of Firefox supports the -moz-border-radius attribute. At present, in order to ensure compatibility, you only need to set -moz-border-radius and border-radius at the same time.
-moz-border-radius: 15px; border-radius: 15px;
(Note: border-radius must be declared last, otherwise it may become invalid.)
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
* -moz-border-radius-topleft（标准语法：border-top-left-radius）
* -moz-border-radius-topright（标准语法：border-top-right-radius）
* -moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
* -moz-border-radius-bottomright（标准语法：border-bottom-right-radius）
五、注意事项
虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都 相同时，所有浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差异。比如，下面这段代码在不同的浏览器中，渲染结果就相差很大。
border-color: black; border-style: solid dashed; border-width: 1px 2px 3px; border-top-color: red; border-radius: 5%;
另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
因此，目前最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。
以上是CSS3的写法
如下是传统的css圆角边框的代码：
<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:200px;
background:#99FFFF;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
background:#99FFFF;
}
textarea{
width:294px;
height:200px;
background:#99FFFF;
border:0;
border-color:#99FFFF;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">
<textarea>
以我的能力，纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方，自己看一看代码的规律，很容易明白。
代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减,用一个像素来控制圆角。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。
这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox IE6 都通过测试。
</textarea>
</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>
---------------------------------------------------------------
<html>
<head>
<style type="text/css">
u.corner u
{
height: 1px;
font-size:1px;
display: block;
overflow: hidden;
text-decoration: none;
border-color:#CC0033;
border-style:solid;
}
u.corner u.h1{margin: 0 5px;}
u.corner u.h2{margin: 0 3px;}
u.corner u.h3{margin: 0 2px;}
u.corner u.h4{margin: 0 1px; height: 2px}
/*
用一个像素的点和控制边距控制显示位置。这个缺点是只能通过背景色来控制。不能设置边框
*/
</style>
<head>
<body>
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
<div style="border-color:#CC0033;border-style:solid; height: 210;border-width:0 1px;">content</div>
<u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
</div>
</body>
</html>
========================================
<fieldset style="width:500px;">
<legend>
标题圆角效果
</legend>
内容比DIV好的圆角效果
</fieldset>
--------------------------------------
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>
content
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>相关推荐：
The above is the detailed content of How to use CSS to achieve the effect of rounded borders. For more information, please follow other related articles on the PHP Chinese website!