CSS3 圆角

CSS3 圆角

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
CSS3 圆角制作器

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。
属性
border-radius 9.0 5.0 4.0 -webkit- 4.0 3.0 -moz- 5.0 3.1 -webkit- 10.5

CSS3 border-radius 属性

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。 以下为三个实例: 1. 指定背景颜色的元素圆角:

圆角!

2. 指定边框的元素圆角:

圆角!

3. 指定背景图片的元素圆角:

圆角!

代码如下:  
#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;}
实例演示

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。 但是,如果你要在四个角上一一指定,可以使用以下规则:
  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同
以下为三个实例: 1. 四个值 - border-radius: 15px 50px 30px 5px: 2. 三个值 - border-radius: 15px 50px 30px: 3. 两个值 - 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;}
实例演示您还可以创建椭圆边角:
#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;}
实例演示

CSS3 圆角属性

属性 描述
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-7-24
  • 王** 23.33 2019-7-29
  • 吴** 10.00 2019-7-14
  • 竺** 0.10 2019-7-5
  • 童** 5.00 2019-7-4
  • 高** 10.00 2019-7-11
  • 孙** 10.00 2019-7-2
  • 刘** 1.00 2019-7-10
  • 王** 10.00 2019-7-14
  • 陈** 20.00 2019-7-3
  • 潘** 100.00 2019-7-2
  • 庾** 1.00 2019-7-6
  • 于** 50.00 2019-7-18
  • 李** 10.00 2019-7-8
  • 钟** 20.00 2019-7-13
  • 毛** 1.00 2019-7-3
  • 许** 10.00 2019-7-5
  • 吕** 0.80 2019-7-26
  • 爱心会员 0.29 2019-7-16
  • 郭** 10.00 2019-7-26
  • 贾** 20.00 2019-7-15
  • 李** 20.00 2019-7-28
  • 张** 1.00 2019-7-10
  • 陈** 10.00 2019-7-11
  • 黄** 20.00 2019-7-10
  • 时** 0.10 2019-7-29
  • 魏** 10.00 2019-7-9
  • 李** 0.70 2019-7-21
  • 冯** 0.30 2019-7-7
  • 石** 10.00 2019-7-27
  • 陈** 20.00 2019-7-15
  • 何** 20.00 2019-7-30
  • 成** 0.10 2019-7-26
  • 赵** 10.00 2019-7-28
  • 刘** 5.00 2019-7-4

扫一扫关注

Web前端中国