CSS3的常见边框汇总

一、简述

我们都知道css
3有一个属性border-radius可以给盒子设置圆角，我当初也只是知道有这个属性，并且知道一些用法，从来没有深入了解过它的作用原理。我们知道将border-radius设置正方形边长的一半或者50%或者100%就可以实现一个原型，但你知道为什么吗？下面我们就一起来探讨一下。

二、常用场景

我一般将border-radius用于以下两种情况：

1.设置圆角让按钮/图片柔和一点

2.将头像设为圆形

三、先回顾一些基本知识

/* 只设置一个角的写法 */
border-top-left-radius: 20px; //设置左上角

border-top-right-radius: 20px; //设置右上角

border-bottom-left-radius: 20px; //设置左下角

border-bottom-right-radius: 20px; //设置左下角

/* 简写，同时设置四个角 /
/ 顺序是 左上-右上-右下-左下 */
border-radius: 20px 10px 10px 20px;

/* 四个角设置统一值可以只写一次 */
border-radius: 20px;

/* 除了用固定值还可以用百分比 */
border-radius: 50%;

但其实，除了上面常用的写法，其实还有一种设置方法

.box3 {
border-radius: 20px/40px;
}

这种写法表示用一个水平半径为20px，垂直半径为40px的椭圆来切割border，如果你不懂，没关系，下面通过几张图来了解一下。

四、原理

我们从上面的最后一种写法入手来剖析原理，我把这种写法理解为border-radius的原始写法

.box3 {
border-radius: 20px/40px;
}

首先，我们有一个box，长为400px，宽为200px

.box {
width: 400px;
height: 200px;
background: #f55;
}

现在，通过固定值来设置border-radius，设为100px/50px

.box {
width: 400px;
height: 200px;
background: #f55;
border-radius: 100px/50px;
}

然后，其作用原理就是下面这张图所示，用一个水平宽为200px，垂直高为100px的椭圆去贴着左上角，左上角多出来（蓝色线区域）的地方就会被切去

最后四个角都切去的效果就是

我上面说了，我把”border-radius:
100px/50px;”这种写法看做是原始写法，我们把我们常规写法改造一下：

/* 原来写法 */
border-radius: 100px;

/* 改为 */
border-radius: 100px/100px;

你会发现这两种写法的效果是一样的：

所以，不管你用那种设置border-radius的方法，原理都是一样的，只不过，一种是省略写法而已。

五、百分比设置原理

我们上面讲的都是设置固定值，这很好理解，我给多大的值，去切割的椭圆就有多大，那么如果设置的是百分比又是一种什么情况呢？

其实，简单的说大家的疑问就是：

百分比是相对谁的？

我们上面说了一种原始写法：

border-radius: 100px/50px;

现在把百分比的写法改写为原始写法：

/* 原来写法 */
border-radius: 50%;

/* 现在改为 */
border-radius: 50%/50%;

我想聪明的你一定知道了，两种写法效果是一样的，上面说到的”/“前面的一个值是椭圆的水平半径，后面的值是椭圆的垂直半径，所以前面的水平半径是相对宽度的，后面的垂直半径是相对高度的。（注意是半径）

六、一个小练习

我们大概了解了原来，下面我们来做一个小练习，完成下面的效果

要求： 分别通过固定值和百分比来实现

po一个参考代码，并不是最佳写法，只是想让大家理解百分比的用法

上面百分比写法计算公式：

宽度小于高度时，交换两个值即可，除不尽时可以四舍五入，有点小误差，但基本可忽略。可以尝试不同的系数，实现多种效果。

#使用

完整用法：border-radius: tl1 tr1 br1 bl1 / tl2 tr2 br2 bl2;

如 border-radius: 1px 2px 3px 4px / 5px 6px 7px 8px;

其中，各个值分别代表：

• tl1：border-top-left-radius 横轴半径（左上角圆角横轴半径）

• tr1：border-top-right-radius 横轴半径（右上角圆角横轴半径）

• br1：border-bottom-right-radius 横轴半径（右下角圆角横轴半径）

• bl1：border-bottom-left-radius 横轴半径（左下角圆角横轴半径）

• tl2：border-top-left-radius 纵轴半径（左上角圆角纵轴半径）

• tr2：border-top-right-radius 纵轴半径（右上角圆角纵轴半径）

• br2：border-bottom-right-radius 纵轴半径（右下角圆角纵轴半径）

• bl2：border-bottom-left-radius 纵轴半径（左下角圆角纵轴半径）

也就是说 / 左边的代表的是横坐标半径，右边代表的是纵轴半径，顺序是从左上角顺时针到左下角。

/ 左右可以看成两个不同的部分，他们并不会互相影响。但是当出现缩写的时候，每个部分之间就会出现影响。

#缩写

border-radius 是一个缩写，当它的值没有 / 时，其四个值先后分别代表了四个属性的值：

• border-top-left-radius：左上角圆角

• border-top-right-radius：右上角圆角

• border-bottom-right-radius：右下角圆角

• border-bottom-left-radius：左下角圆角

当有 / 时，相当于分别把上面四个属性的长轴半径放到了 / 左边，短轴半径放到了 / 右边。

缩写时被省略的属性会取对角的属性的值，如果缩写后只有一个值，那么所有属性都是这个值。

例如：border-radius: 1px 2px 3px; 等同于 border-radius: 1px 2px 3px
2px;（省略了左下，因此左下的值会取右上的值，即 2px）。

再比如：border-radius: 2em 1em 4em / 0.5em 3em; 等同于 border-radius:
2em 1em 4em 1em / 0.5em 3em 0.5em
3em;（以 / 为届分成两部分来看。左边：2em 1em
4em 缺少左下，取右上的值 1em；右边：0.5em
3em，省略了右下，取左上 0.5em，省略了左下，取右上 3em）。

如果只有一个值 border-radius: 1px /
2px;，那么所有属性都会是这个值，即等同于 border-radius: 1px 1px 1px 1px
/ 2px 2px 2px 2px;

下面的表格列举了缩写的所有基本情况及其对应的各个半径：

---

缩写 tl1 tl2 tr1 tr2 br1 br2 bl1 bl2

---

border-radius: 1; 1 1 1 1 1 1 1 1

border-radius: 1 1 1 2 2 1 1 2 2
2;

border-radius: 1 1 1 2 2 3 3 2 2
2 3;

border-radius: 1 1 1 2 2 3 3 4 4
2 3 4;

border-radius: 11 11 21 11 21 11 21 11 21
/ 21;

border-radius: 11 11 21 12 21 11 21 12 21
12 / 21;

border-radius: 11 11 21 12 21 13 21 12 22
12 13 / 21 22;

border-radius: 11 11 21 12 22 13 23 14 24
12 13 14 / 21 22
23 24;

---

说明：

• 省略了单位

• 各列的含义：

  • tl1：左上角圆角横轴半径

  • tl2：左上角圆角纵轴半径

  • tr1：右上角圆角横轴半径

  • tr2：右上角圆角纵轴半径

  • br1：右下角圆角横轴半径

  • br2：右下角圆角纵轴半径

  • bl1：左下角圆角横轴半径

  • bl2：左下角圆角纵轴半径

七、border-radius的水平、垂直半径

1、四方都是1/4圆的圆角半径，说明水平和垂直的半径是一样的。

CSS

.br4{

border-radius:10px 20px 30px 40px;}

只要水平和垂直的半径是相等的，产生的就是四分之一圆。

而且，圆角具有外半径和内半径之分。

当radius半径值小于border的值时，没有内半径，所以内角是直角，当radius半径值大于border的值时，才有内半径，也才有内圆角。内半径的值等于外半径的值减去border的值。

如果我们需要的是标准的椭圆呢？

CSS

.box1{

width:200px;

height:100px;

border:20px solid #F60;}

.br5{

border-radius:50%;

}

当宽高不一样的时候，半径为50%，则是标准的椭圆。

如果我们设置一个非常大的半径值，则成了橡胶跑道。

CSS

.br6{

border-radius:500px;}

这是为什么呢？

张鑫旭的博客里这篇文章解释的非常清楚：秋月何时了，CSS3
border-radius知多少？

2、当水平、垂直半径不一样的时候

CSS

.br61{

border-radius:100px 50px 60px 40px/50px 100px 30px 20px ;}

此时的语法是border-radius:水平/垂直;

水平、垂直的四个值的方位是左上、右上、右下、左下顺时针方向。

此时水平垂直的值之间是”/“隔开的。

四、边框宽度不一致

CSS

.border1{

border-width:20px 0px 30px;}

.br7{

border-radius:40px;}

边框宽度不一致的时候，圆角是从宽的边向窄的边转动过来的。其实可以理解为外半径是一样的，但是内半径在不断地变大。

五、边框颜色不一致

CSS

.border2{

border-color:#FC5505 #0FA81B #0ECDE2 #F5388D;}

.br8{

border-radius:40px;}

当边框的宽度发生变化时：

CSS

.border2{

border-color:#FC5505 #0FA81B #0ECDE2 #F5388D;}

.border3{

border-width:20px 40px 20px 10px;}

.br8{

border-radius:40px;}

可以发现，两个颜色之间的间隔线条的角度与边框的宽度的比值是一样的。比如两条相邻的边框的宽度在这里都是1:2或者2:1，所以90度被分为了三份，每份30度，两倍宽的边框的夹角为60度，一倍宽度的边框的夹角是30度。

六、某个角有圆角

CSS

.br9{

border-top-right-radius:200px 100px;

}

可以单独为某个角设置圆角，此时的语法结构是：border-垂直-水平-radius:水平
垂直;

好蹊跷的语法结构呀,属性名是垂直水平，属性值是水平垂直，能不能统一一点？

还有，此处的两个值中间是空格，不是”/“呀！

七、绘制一个弯弯的月亮

CSS

.moon{

width:100px;

height:100px;

border-right:20px solid #F60;

border-radius:50%;}

八、绘制一条小鱼

CSS

.fish{

width:34px;

height:34px;

position:relative;

background-color:#2c2c2c;

border-radius:80% 0;

transform:rotate(45deg);

margin-left:50px;}

.fish:before{

content:””;

position:absolute;

border-left:10px solid #2c2c2c;

border-top:10px solid transparent;

border-bottom:10px solid transparent;

top:24px;

left:-5px;

transform:rotate(-45deg);}

.fish:after{

position:absolute;

content:””;

width:5px;

height:5px;

background-color:#fff;

border-radius:50%;

top:6px;

right:7px;

box-shadow:5px -20px 1px 1px #2c2c2c,-1px -35px 2px 2px #2c2c2c;}

九、绘制一副墨镜

CSS

.glass{

font-size:27px;

width:0.4em;

height:0.1em;

position:relative;

border-top:0.05em solid #2c2c2c;

border-radius:50% 50% 0 0/100% 100% 0 0;

box-shadow:-0.2em -0.3em 0 -0.07em #2c2c2c,0 -0.3em 0 -0.07em
#2c2c2c,0.2em -0.3em 0 -0.07em #2c2c2c;

margin:0 0 50px 50px;

}

.glass:before{

position:absolute;

content:””;

width:1em;

height:1.1em;

background-color:#2c2c2c;

border-top-left-radius:100% 75%;

border-top-right-radius:142% 100%;

border-bottom-right-radius:91% 197%;

border-bottom-left-radius:200% 200%;

top:-0.4em;

left:0.37em;

box-shadow:0.55em 0 0 -0.47em #2c2c2c;}

.glass:after{

position:absolute;

content:””;

width:1em;

height:1.1em;

background-color:#2c2c2c;

border-top-right-radius:100% 75%;

border-top-left-radius:142% 100%;

border-bottom-left-radius:91% 197%;

border-bottom-right-radius:200% 200%;

top:-0.4em;

left:-1em;

box-shadow:-0.55em 0 0 -0.47em #2c2c2c;}

点击查看具体案例

其实，这些绘制出来的图形主要利用了:before和:after伪元素，relative和absolute定位，以及box-shadow和border-radius以及transform变形等功能。

实际案例

CSS3 边框圆角

效果如下：

爱心

效果如下：

它其实是下面这两个盒子叠起来的：

改变 .heart::after 的 left值，即可叠起来。