CSS实现边框圆角

CSS实现边框圆角

通过设置border-radius可以实现圆角边框的效果。

1.分别设置四个角的半径值

在border-radius属性中，依次书写四个角的半径。从左上角开始，顺时针方向进行设置。

例如：border-radius：75px 75px 0 0;

2.每一个角都可以设置两个方向的半径

对于类似于椭圆形的图形来说，每一个角都不是正圆的切线。而是使用一个椭圆来作为角的内切圆。也可以分别设置四个角的内切椭圆半径，使用斜杠来分开横轴半径和纵轴半径。

例如：border-radius：a1 b1 c1 d1/a2 b2 c2 d2;

a,b,c,d分别对应四个角，从左上角开始顺时针方向，前4个数表示切割时椭圆的横轴半径，后4个数表示切割时椭圆的纵轴半径。

下面是我就边框圆角做出的一些图形：

先介绍一些简单的图形



第1个图形就是给一个矩形加上了圆角，也就是设置了border-radius属性，代码如下：

.item:nth-of-type(1) .content{
height: 150px;
/*设置box的圆角边框*/
border-radius: 10px;
}

第2个是个圆形，就是将半径设置得大一点，相当于将第一个图形的圆角变大，变大到成为一个远。代码如下：

.item:nth-of-type(2) .content{
/*50%表示半径为当前矩形边长的一半*/
/*正圆形*/
border-radius: 50%;
}

第3个是分别设置了四个角的半径值，代码如下：

.item:nth-of-type(3) .content{
/*拱形*/
/*设置圆角半径时，可以按照顺时针的顺序，从左上角开始分别设置每一个角的圆角半径*/
border-radius: 50% 50% 0 0;
}

第4个图形是个半圆，半圆形的话我们就需要重新设置一下宽高，然后再分别设置四个角的半径值就可以：

.item:nth-of-type(4) .content{
height: 75px;
border-radius: 75px 75px 0 0;
/*半圆就是没有下半部分的拱形*/
/*高度发生变化时，高度的50%也会随之改变。所以圆角半径需要设定75px的固定值*/
margin-top: 60px;
}

第5个也十分简单：

.item:nth-of-type(5) .content{
border-radius: 50% 0 0 0;
}

第6个图形是个1/4圆，和半圆类似，但1/4圆只要设置左上角为圆弧就可以了：

.item:nth-of-type(6) .content{
border-radius: 75px 0 0 0;
height: 75px;
width: 75px;
margin-top: 60px;
margin-left: 60px;
}

第7个图形是个椭圆，关于椭圆的设置，我在开头也介绍了设置两个方向半径的方法，这里就应该使用这个方法——border-radius：a1 b1 c1 d1/a2 b2 c2 d2;代码如下：

.item:nth-of-type(7) .content{
height: 75px;
border-radius: 75px 75px 75px 75px / 37.5px 37.5px 37.5px 37.5px;
margin-top: 60px;
}

第8个图形也是个椭圆，是将上一个椭圆竖起来了，我们只要互换一下前后长轴短轴的值就可以实现：

.item:nth-of-type(8) .content{
width: 75px;
border-radius: 37.5px 37.5px 37.5px 37.5px / 75px 75px 75px 75px;
margin: 25px auto;
}

下面接着讲一些和椭圆有关的图形以及加上边框以后形成的一些有意思的图案：



第1个图形显然是半个横着的椭圆，下端两个角设置为0即可，代码如下：

.item:nth-of-type(9) .content{
height: 37.5px;
border-radius: 75px 75px 0 0 / 37.5px 37.5px 0 0;
margin-top: 60px;
}

第2个图形是半个竖着的椭圆，同样更改一下四个角的值就可以：

.item:nth-of-type(10) .content{
width: 37.5px;
border-radius: 37.5px 0 0 37.5px / 75px 0 0 75px;
margin: 25px auto;
}

第3个图形是个1/4椭圆，类似于1/4圆，我们只需设置左上角的半径值就可以了，代码如下：

.item:nth-of-type(11) .content{
width: 37.5px;
height: 75px;
border-radius: 37.5px 0 0 0 / 75px 0 0 0;
margin: 60px auto;
}

第4个图形，是将一个矩形的左上角设置了椭圆半径值，但是要小于宽高：

.item:nth-of-type(12) .content{
border-radius: 75px 0 0 0 / 37.5px 0 0 0;
}

第5个图形，是一个圆环，就是给图形设置了一个比较大的border值，然后再设置半径值使其变成一个圆形：

.item:nth-of-type(13) .content{
width: 50px;
height: 50px;
border: 50px solid red;
border-radius: 50%;
}

第6个图形是一个外圆内方的图形，形成这个图形的原因是因为设置的border-radius值小于border值：

.item:nth-of-type(14) .content{
width: 50px;
height: 50px;
border: 50px solid red;
border-radius: 50px;
}

第7个图案是在加了边框的基础上设置了左上角的半径：

.item:nth-of-type(15) .content{
width: 50px;
height: 50px;
border: 50px solid red;
border-radius: 75px 0 0 0;
}

第8个图案依旧很简单，是在加了边框的基础上设置了左上角和右下角的radius值：

.item:nth-of-type(16) .content{
width: 50px;
height: 50px;
border: 50px solid red;
border-radius: 75px 0;
}

接下来又是8个图案啦：



第1个图案是设置四个不同的border-color，形成4个不同颜色的边框，如果盒子本身有宽高，那么中心就是一个矩形，四边不同颜色的边框是四个不同颜色的梯形，这样，如果我将宽高设为零，中心就是一个点了，梯形变成了三角形，也就是第1个图案，代码如下：

.item:nth-of-type(17) .content{
width: 0;
height: 0;
border: 75px solid red;
border-color:
eaec
blue red green yellow;
}

第2个图案是也就是上个图案将右侧边框设置成透明的（transparent）就可以：

.item:nth-of-type(18) .content{
width: 0;
height: 0;
border: 75px solid red;
border-color: blue transparent green yellow;
}

第3个图案看起来像个吃豆人，也就是在前两个图案的基础上设置radius，让矩形变成圆形就好，边框除了右边透明其余都是红色就可以：

.item:nth-of-type(19) .content{
width: 0;
height: 0;
border: 75px solid red;
border-radius: 50%;
border-color: red transparent red red;
}

第4个图案与吃豆人相反，颜色重新设置一下就可以，代码如下：

.item:nth-of-type(20) .content{
width: 0;
height: 0;
border: 75px solid red;
border-radius: 50%;
border-color: transparent red transparent transparent;
}

第5个和第6个图案是一样的，但是是用了两种不一样的方法，这两个图案也是后面八卦图的基础。

第一种方法代码：

.item:nth-of-type(21) .content{
height: 0;
border: 75px solid yellow;
border-radius: 75px;
border-width: 75px 0;
border-color: yellow yellow blue blue;
}

第二种方法代码：

.item:nth-of-type(22) .content{
height: 75px;
border: 0 solid yellow;
border-radius: 75px;
background-color: blue;
border-top-width: 75px;
}

第7个和第8个图案是太极的图案，需要在前两个图案基础上再设置一个伪类，也就是设置两个小圆环，通过定位的方法放在两个基础图上，两种方法代码如下：

.item:nth-of-type(23) .content{
position: relative;
height: 0;
border: 75px solid yellow;
border-radius: 75px;
border-width: 75px 0;
border-color: yellow yellow blue blue;
}
.item:nth-of-type(24) .content{
position: relative;
height: 75px;
border: 0 solid yellow;
border-radius: 75px;
background-color: blue;
border-top-width: 75px;
}
.item:nth-of-type(23) .content::before,
.item:nth-of-type(23) .content::after,
.item:nth-of-type(24) .content::before,
.item:nth-of-type(24) .content::after{
content: '';
position: absolute;
width: 25px;
height: 25px;
border: 25px solid yellow;
margin-top: -37.5px;
border-radius: 50%;
}
.item:nth-of-type(23) .content::before{
background-color: blue;
border-color: yellow;
top: 50%;
left: 0;
}
.item:nth-of-type(24) .content::before{
background-color: blue;
border-color: yellow;
left: 0;
}
.item:nth-of-type(23) .content::after{
background-color: yellow;
border-color: blue;
top: 50%;
right: 0;
}
.item:nth-of-type(24) .content::after{
background-color: yellow;
border-color: blue;
right: 0;
}

最后再介绍4个有趣的图案：



第1个图案是一个聊天消息框，思路是将前文的四色边框三边设置成透明，这样就可以拿到消息框最左边的小三角形，再用定位的方法，将小三角定位过去：

.item:nth-of-type(25) .content{
position: relative;
height: 75px;
background-color: red;
border-radius: 10px;
margin-top: 60px;
border: none;
}
.item:nth-of-type(25) .content::before{
content: '';
position: absolute;
width: 0;
height: 0;
border: 10px solid red;
border-color: transparent red transparent transparent;
left: -20px;
top: 20px;
}

第二个图案是个奇怪的图案，思路是设置border-radius的值超过border值，这样里面的也会弯曲：

.item:nth-of-type(26) .content{
width: 60px;
height: 60px;
border-width: 50px 0 50px 60px;
border-style: solid;
border-color: red;
border-radius: 0 0 70px 0;
margin: 20px auto;
}

第3个图案思路和前一个基本一样：

.item:nth-of-type(27) .content{
box-sizing: border-box;
width: 150px;
height: 120px;
margin-top: 40px;
border-width: 40px 15px 40px 50px;
border-style: solid;
border-color: red;
border-radius: 45px 45px 45px 45px;
}

最后一个图案也是一个对话框，与前面对话框的区别是箭头是弯曲的，这个有一个很有意思的方法，是通过设置“过度的”border-radius，让图形变形，变得奇怪，这样才能够形成这样的弯箭头，具体操作是这样的：

.item:nth-of-type(28) .content{
position: relative;
height: 75px;
background-color: red;
border-radius: 10px;
margin-top: 60px;
border: none;
}
.item:nth-of-type(28) .content::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 0 0 50px 0;
border-color: red;
border-style: solid;
border-width: 0 0 30px 30px;
left: 120px;
top: 10px;
}

以上就是有关边框圆角的一些案例，通过这些可以做出一些有意思的图案，给页面制作提供一些有意思的思路。