HTML5+CSS3  圆角边框的绘制
在CSS 3中，使用CSS样式完成圆角边框绘制，是经常用来美化页面效果的手法之一。
1．border-radius属性
在CSS 3中，border-radius属性用于指定圆角的半径，来完成圆角半径的绘制。
示例：17-4  BorderRadius.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆角边框</title>
<style type="text/css">
div {
    border-radius:25px;
    background-color:#E4E4E4;
    border: solid 5px red;
    padding: 20px;
    font-size:24px;
    color:#000000;
    -moz- border -radius:20px;
    -o- border -radius: 20px;
    -webkit- border -radius:20px;
    width:300px;
    height:123px;
}
</style>
</head>
<body>
<div>　“月上柳梢头，人约黄昏后”，中秋无依之日，世道沧桑，情去节依在，人靠月圆瘦。思念的中秋，总人倍感沉寂和清幽。
</div>
</body>
</html>
在上述代码中，使用border-radius属性绘制DIV层的边框，设置圆角半径为25像素。
2．在border-radius属性中指定两个半径
在使用border-radius属性绘制圆角边框时，可以指定两个半径，语法如下：
border-radius:25px 15px;
border radius什么意思
在这种情况下绘制圆角边框时，各浏览器的处理方式不同。例如，在Chrome浏览器中绘制
圆角边框时，第一半径为水平方向半径，第二半径为垂直方向半径。在Opera浏览器中，将第一半径作为边框左上角与右下角的圆角半径来绘制，将第二个半径作为边框右上角与左下角的圆角半径来绘制。
下列代码与示例17-4中的代码部分相同，样式修改代码如下：
示例：17-5  BorderRadius1.html
<style type="text/css">
div {
    border-radius:60px 15px;
    background-color:#E4E4E4;
    border: solid 5px red;
    padding: 20px;
    font-size:24px;
    color:#000000;
    -moz- border -radius:20px;
    -o- border -radius: 20px;
    -webkit- border -radius:20px;
    width:300px;
    height:123px;
}
</style>
在上述代码中，使用border-radius属性绘制DIV层的边框，分别设置圆角半径为60像素和15像素，边框颜为红。在Opera游览器中效果如下：
3．设置边框为不显示
在使用border-radius属性绘制圆角边框时，可以使用border属性的none值将边框设置为不显示。
示例：17-6  BorderRadius2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆角边框</title>
<style type="text/css">
div {
    border-radius: 15px 60px ;
    background-color:#E4E4E4;
    border: none;
    padding: 20px;
    font-size:24px;
    color:#000000;
    -moz- border -radius:20px;
    -o- border -radius: 20px;
    -webkit- border -radius:20px;
    width:300px;
    height:123px;
}
</style>
</head>
<body>
<div>　“月上柳梢头，人约黄昏后”，中秋无依之日，世道沧桑，情去节依在，人靠月圆瘦。思念的中秋，总人倍感沉寂和清幽。
</div>
<br>
</body>
</html>
在上述代码中，设置div层背景颜为“#E4E4E4”，宽度为300像素，高度为123像素。
4．绘制四个角不同半径的圆角边框
在绘制圆角边框时，如果圆角边框的四个圆角半径各不相同，可以使用下列属性进行设置。
名称
解释
border-top-left-radius
指定左上角半径。
border-top-right-radius
指定右上角半径。
border-bottom-left-radius
指定左下角半径。
border-bottom-right-radius
指定右下角半径。
示例：17-7  BorderRadius3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆角边框</title>
<style type="text/css">
div {
    border-radius: 15px 60px ;
    border-bottom-left-radius:80px;
    border-bottom-right-radius:60px;
    border-top-left-radius:30px;
    border-top-right-radius:5px;
    background-color:#E4E4E4;
    border: solid 5px red;
    padding: 20px;
    font-size:24px;
    color:#000000;
    -moz- border -radius:20px;
    -o- border -radius: 20px;
    -webkit- border -radius:20px;
    width:300px;
    height:123px;
}
</style>
</head>
<body>
<div>　“月上柳梢头，人约黄昏后”，中秋无依之日，世道沧桑，情去节依在，人靠月圆瘦。思念的中秋，总人倍感沉寂和清幽。
</div>
</body>
</html>
在上述代码中，设置左上角的半径为30像素，设置左下角的半径为80像素，设置右上角的半径为5像素，设置右下角的半径为60像素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。