<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 圆角</title>
<style>
#rcorners1{
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2{
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3{
border-radius: 25px;
background: url("images/img_lights.jpg");
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4{
border-radius: 15px 50px 30px 5px; /*左上 右上 右下 左下*/
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5{
border-radius: 15px 50px 30px; /*第一个值 左上 第二个值右上 左下 第三个值 右下*/
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6{
border-radius: 15px 50px; /*第一个值 左上 右下 第二个值 右上 左下*/
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7{
border-radius: 15px; /*四个角值相同*/
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8{
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9{
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners10{
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>border-radius 属性允许向元素添加圆角</h1>
<h2>指定背景颜色元素的圆角</h2>
<p id="rcorners1">圆角</p>
<h2>指定边框元素的圆角</h2>
<p id="rcorners2">圆角</p>
<h2>指定背景图片元素的圆角</h2>
<p id="rcorners3">圆角</p>
<br><br>
<h2>border-radius:15px 50px 30px 5px</h2>
<h2>左上15px 右上50px 右下30px 左下5px</h2>
<p id="rcorners4">圆角</p>
<h2>border-radius:15px 50px 30px</h2>
<h2>左上15px 右上50px 左下50px 右下30px</h2>
<p id="rcorners5">圆角</p>
<h2>border-radius:15px 50px</h2>
<h2>左上15px 右下15px 右上50px 左下50px</h2>
<p id="rcorners6">圆角</p>
<h2>四个角值相同 15px</h2>
<p id="rcorners7">圆角</p>
<h2>椭圆边框 - border-radius：50px/15px</h2>
<p id="rcorners8">圆角</p>
<h2>椭圆边框 - border-radius：15px/50px</h2>
<p id="rcorners9">圆角</p>
<h2>椭圆边框 - border-radius：50%</h2>
<p id="rcorners10">圆角</p>
</body>
</html>
1、浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。
属性 border-radius
IE 9.0
Chrome 5.0 4.0-webkit-
Firefox 4.0 3.0-moz-
Safari 5.0 3.1-webkit-
Opera 10.5
2、CSS3 border-radius 属性
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
以下为三个实例：
- 指定背景颜色的元素圆角：
- 指定边框的元素圆角:
- 指定背景图片的元素圆角:
代码如下:
实例
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
3、CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
以下为三个实例:
-
四个值 - border-radius: 15px 50px 30px 5px:
-
三个值 - border-radius: 15px 50px 30px:
-
两个值 - border-radius: 15px 50px:
以下为源代码:
实例
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
4、创建椭圆边角:
实例
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
5、CSS3 圆角属性
属性 描述
border-radius 所有四个边角 border---radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
网友评论