2024年6月6日发(作者：)
HTML5+CSS3 圆角边框的绘制
在CSS 3中，使用CSS样式完成圆角边框绘制，是经常用来美化页面效果的手
法之一。
1．border-radius属性
在CSS 3中，border-radius属性用于指定圆角的半径，来完成圆角半径的绘制。
示例：17-4
念的中秋，总人倍感沉寂和清幽。
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;
在上述代码中，使用border-radius属性绘制DIV层的边框，设置圆角半径为25
像素。
边框的圆角半
径为25像素
2．在border-radius属性中指定两个半径
在使用border-radius属性绘制圆角边框时，可以指定两个半径，语法如下：
border-radius:25px 15px;
在这种情况下绘制圆角边框时，各浏览器的处理方式不同。例如，在Chrome
浏览器中绘制圆角边框时，第一半径为水平方向半径，第二半径为垂直方向半径。
在Opera浏览器中，将第一半径作为边框左上角与右下角的圆角半径来绘制，将第
二个半径作为边框右上角与左下角的圆角半径来绘制。
下列代码与示例17-4中的代码部分相同，样式修改代码如下：
示例：17-5
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;
在上述代码中，使用border-radius属性绘制DIV层的边框，分别设置圆角半径
为60像素和15像素，边框颜色为红色。在Opera游览器中效果如下：
设置圆角半径
为60像素
设置圆角半径
为15像素
3．设置边框为不显示
在使用border-radius属性绘制圆角边框时，可以使用border属性的none值将边
框设置为不显示。
示例：17-6
念的中秋，总人倍感沉寂和清幽。
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;
在上述代码中，设置div层背景颜色为“#E4E4E4”，宽度为300像素，高度为
123像素。
设置边框不显示
4．绘制四个角不同半径的圆角边框
在绘制圆角边框时，如果圆角边框的四个圆角半径各不相同，可以使用下列属
性进行设置。
名称
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
解释
指定左上角半径。
指定右上角半径。
指定左下角半径。
指定右下角半径。
示例：17-7
念的中秋，总人倍感沉寂和清幽。
在上述代码中，设置左上角的半径为30像素，设置左下角的半径为80像素，
设置右上角的半径为5像素，设置右下角的半径为60像素。
半径为30像素
半径为5像素
半径为60像素
半径为80像素
发布评论