【CSS】圆角(border-radius)

96
Rabbit_svip
2018.01.04 06:46* 字数 907
00015.jpg

圆角

在CSS中,添加圆角需要用到border-radius属性。

image.png

HTML代码:

<div class="speciaBox"></div>

CSS代码:

.speciaBox {
    width: 300px;
    height: 200px;
    background: teal;
    border-radius: 20px;
}

浏览器会以指定的值为半径,在元素的各个角上绘制圆角。设定的值是圆心到圆周的距离,即半径。

半径最常用的单位是px和em,不过也可以使用百分比(百分比相对来说比较不好控制,接下来会讲到)。

如果只指定一个值,浏览器会使用相同的半径绘制元素的四个角。如上面的例子(border-radius: 20px;)。

如果不是四个角都得使用相同的值,我们可以提供四个值,分别设定四个角。
如:

CSS代码

border-radius: 20px 30px 80px 10px;

如下图所示。

image.png


指定的四个值从盒子的左上角开始,顺时针旋转。
也就是说(以上图为例),第一个值(20px)应用于左上角,第二个值(30px)应用于右上角,第三个值(80px)应用于右下角,第四个值(10px)应用于左下角。

除此之外,也可以只提供两个值。此时,第一个值应用于左上角和右下角,第二个值应用于右上角和左下角。

最后,也可以提供三个值,此时,第一个值应用于左上角,第二个值应用于右上角和左下角,第三个值应用于右下角。

下图可以看出对应关系。

image.png

如果不嫌麻烦,还可以使用不同的属性分别定义各个角的外观:

CSS代码:

border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 10px;

小学英语就能看懂上面代码~

以上代码等同于
border-radius: 20px 30px 80px 10px;




椭圆角

椭圆角其实也属于圆角的一种,椭圆角的轨迹由2个半径值确定:
第一个是中心点到左顶点或右顶点的距离;
第二个是中心点到上顶点或下顶点的距离。

例如:

CSS代码:

border-radius: 40px / 20px;

image.png

很明显,设置了两个值之后,就不是一开始那种规规矩矩的圆角了。
以上面的代码为例,其中,40px是横向半径,20px是纵向半径。这两个值之间的斜线是告诉浏览器,我们想创建椭圆轨迹。


图解:

image.png
image.png


除此之外,我们还可以提供4个值,在四个角绘制不同的椭圆角。

语法:先提供四个横向半径的值(从左上角开始),写斜线(/),然后再提供四个纵向半径。
如:

CSS代码:

border-radius: 40px 10px 20px 90px / 20px 30px 80px 10px;

image.png

意思就是为4个角提供完全不同的水平和垂直的半径。

最后,需要注意的是:
画椭圆角时,如果需要指定其中一个角(比如border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius),设置横向值和纵向值之间,不需要斜线(/),直接用空格隔开就行

如:

CSS代码:

border-top-right-radius: 80px 20px;

image.png

这里我指定了右上角。

切记这点注意事项!




IE8 及之前的版本都不支持border-radius属性。
不支持该属性的旧浏览器将盒子显示为直角。






HTML与CSS 目录:HTML与CSS

上一篇:【CSS】渐变背景(background-image)

下一篇:【CSS】省略号

HTML&CSS
Web note ad 1