整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

一篇文章带你了解CSS3圆角知识

、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5

二、border-radius 属性

1. 创建具有背景图的圆角

CSS3中，可以使用border-radius属性，为元素指定圆角显示。

代码如下：

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>项目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圆角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.带边框的圆角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.带背景图的圆角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

提示:

border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 属性的简写。

2. 为每个角指定弧度

如果只为border-radius属性指定一个值，则此半径将应用于所有4个角。

另外可以根据自己开发的需求，分别指定每个角。以下是规则：

四个值: 第一个值适用于左上角，第二个值适用于右上方，第三值应用于右下角，第四值适用于左下角。

三个值: 第一个值适用于左上，二值适用于右上和左下，右下第三值适用于。

两个值: 第一个值适用于左上和右下角，和二值适用于右上和左下角。

一个值: 所有的四个角都是圆的。

实例1：

1.四个值 - border-radius: 15px 50px 30px 5px

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2.三个值 - border-radius: 15px 50px 30px

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3.两个值 - border-radius: 15px 50px

#rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

完整代码 ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html>

实例2：

创建椭圆形的圆角

创建椭圆形的圆角

椭圆边框 ：border-radius: 50px/15px

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

椭圆边框 ： border-radius: 15px/50px

#rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

椭圆边框 ： border-radius: 50%

#rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>椭圆边框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>椭圆边框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>椭圆边框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

三、总结

1、本文主要讲解了CSS3圆角，通过一些属性的演示，丰富的案例，帮助大家理解CSS知识。希望大家可以耐心的去学习，同时希望碰到问题主动搜索，尝试一下，总会有解决方法。

2、代码很简单，希望能帮到你。

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。

边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。

11.1 边框逼格

在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。

边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。

/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四条边框可个性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*单条边框设置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border统一设置四条边框<br/>
    顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四条边框一起设置，风格可不同<br/>
    顺序为:上、右、下、左。<br/>
    1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
    2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    单独一天边框进行设置<br/>
    border-top：顶部宽度、样式、颜色，一起设置<br/>
    border-top-width:上边框宽度；<br/>
    border-top-style:上边框样式；<br/>
    border-top-color:上边框颜色。
    <br/>
</div>
</body>
</html>

输出结果

11.2 圆角风格

使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。

在样式表ys2.css文中的内容

/*4个角统一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*单独指定一个角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<br/><br/>
<div class="four-radius">
    统一设置4个圆角<br/>
    一个值： 四个圆角值相同;<br/>
    两个值: 左上角与右下角，右上角与左下角;<br/>
    三个值: 左上角, 右上角和左下角，右下角;<br/>
    四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    单独指定某个角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

输出结果

11.3 圆角边框

不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。

在样式表ys2.css文件中的内容

/*圆角边框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<div class="corners">
    边框属性和圆角属性，组合成圆角边框
</div>

输出结果


好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天，小海前端（头条号）为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性

承接文章：利用CSS3制作信纸背景，巧妙使用新增的背景属性，样式变得更有趣

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本节涉及到的CSS3属性为：

  • border-radius

一、圆角属性的取值：

CSS3 使用border-radius属性设置圆角效果

该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：

  • none，默认值，表示元素没有圆角效果

  • length，由浮点数字和单位标识组成的长度值

  • %，由百分比设置的圆角值

该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。

格式：border-radius: 左上角 右上角 右下角 左下角;

通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。

例1：利用整数来实现圆角取值。

div{

width: 200px; height: 150px;

border: solid 1px #aaaaaa;

border-radius: 10px 5px 10px 5px;

background-color: #ff5857;

}

上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。

下面我们通过图示的形式，以左上角为10像素为例，来看一下这10元素是指哪段距离。一个角的圆角效果包括两部分：“水平角半径”和“垂直角半径”。一个角的取值为一个数据，表示其“水平角半径”和“垂直角半径”是相等的。

水平角半径与垂直角半径相等

看来，border-radius属性的取值应该为四个值，表示四个方向的圆角幅度。若该属性在取值时，取值个数小于四个，又应该如何理解呢？

例2：查看下列CSS代码。

（1）border-radius: 10px 5px 15px 20px;

（2）border-radius: 10px 5px 15px;

（3）border-radius: 10px 5px;

（4）border-radius: 10px;

上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。

因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。请同学们根据这样的方法，理解一下组（3）的圆角含义。

组（4）就设置了一个数据，这表示四个方向的角半径均为10px。

二、独立设置元素的四个圆角效果：

若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。

  • border-top-left-radius, 定义左上角的圆角效果

  • border-top-right-radius, 定义右上角的圆角效果

  • border-bottom-right-radius, 定义右下角的圆角效果

  • border-bottom-left-radius, 定义左下角的圆角效果

上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。

例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均为25px。

方法1：利用border-radius属性统一设置。

p{border-radius: 25px 25px 25px 0;}

方法2：利用border-radius属性的派生子属性设置。

p{

border-top-left-radius: 25px;

border-top-right-radius: 25px;

border-bottom-right-radius: 25px;

}

方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属性的派生子属性设置左下角没有圆角效果。

p{

border-radius: 25px;

border-bottom-left-radius: none;

}

三、设置水平角半径和垂直角半径不同的圆角效果

W3C也提供了两个角半径不相同的圆角效果设置方式，这里依然以左上角为例，来展示两个角半径不同的设置方式。

格式：border-top-left-radius:水平角半径/垂直角半径;

上述格式中，两个方向的角半径之间利用斜杠（/）间隔。

例4：设置div块级元素的左上角圆角效果为：水平角半径50px，垂直角半径25px。

div{border-top-left-radius: 50px/25px;}

水平角半径与垂直角半径不相等

例5：设置div块级元素为一个半径为100px的正圆形。

div{

width: 200px; height: 200px;

background-color: #ff5857;

border: solid 1px #aaaaaa;

border-radius: 100px;

}

上述代码中将块级元素的圆角效果半径设置为宽度或高度的一半，这样就可以得到一个半径为宽度或高度的一半的正圆形。

例6：设置div块级元素为一个长半轴为100px，短半轴为75px的椭圆形。

div{

width: 200px; height: 150px;

background-color: #ff5857;

border: solid 1px #aaaaaa;

border-radius: 100px/75px;

}

上述代码中将块级元素的水平角半径设置为宽度的一半，垂直角半径设置为高度的一半。由于这个块级元素的宽度和高度不一样，因此就可以得到一个椭圆形。

四、利用百分比实现圆角效果：

W3C规定，同样可以使用百分比来实现块级元素的圆角效果。这里，百分比值是相对于块级元素的宽度或高度来作为依据的。水平角半径的大小相对于块级元素的宽度值依据，垂直角半径的大小相对于块级元素的高度值依据。

例7：查看下列CSS代码。

div{

width: 200px; height: 200px;

border-radius: 20%;

}

上述代码中，div标记的圆角效果中，水平角半径为宽度的20%，即200px * 20% = 40px。垂直角半径为高度的20%，也为40px。

例8：查看下列代码。

div{

width: 200px; height: 100px;

border-radius: 20%;

}

上述代码中，div标记的圆角效果中，水平角半径为宽度的20%，即200px * 20% = 40px。垂直角半径为高度的20%，即100px * 20% = 20px。

也就是说，只要border-radius的取值为50%，则当宽度和高度相同时，得到一个正圆形；当宽度和高度不相同时，得到一个椭圆形。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

在CSS3技术中，与边框相关的还包括一个名为border-image的属性，该属性用于为边框添加图片。但是该属性的派生子属性较多，实现原理较为复杂。下一篇文章中，小海前端（头条号）带领小伙伴们认识这个CSS3新增的边框图像属性。


在线咨询
上一篇：从Chrome到Firefox的心路历程（附火狐效率插件推荐）
下一篇：程序员浪漫起来没文科生什么事：HTML制作表白爱心-无需编程基础

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 长海县 碾子山区 香坊区 剑河县 响水县 化州市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服