来了解一下这些不为人知的border-radius属性

前言

CSS中总有一些你不知道的样式使用方式，但是当遇到一些比较特殊的样式要绘制的时候，这些属性就能给你帮手很大的忙，比如border-radius，我们可以用它来画一个圆形、半圆，四分之一圆，椭圆，半椭圆，不规则圆…

普通的圆角

最常用的圆角样式

我们用的最多的就是在一个盒子画上圆角边框，原理就是在div盒子上削一个半径为20px的四之一圆：

1
2
3
4
5
6
.box1{
      height: 200px;
      width: 200px;
      background-color: pink;
      border-radius: 50px;
    }

效果图：

image

画一个标准的圆

当我们把border-radius的值设置为一个正方形的二分之一边长时，就画了一个标准的圆形：

1
2
3
4
5
6
.box1{
      height: 200px;
      width: 200px;
      background-color: pink;
      border-radius: 100px;
    }

效果图：

image

问题：当我们把border-radius的值继续加大会出现什么效果呢？答案是没有效果，因为当border-radius的值为一个时，它的最大有效值为“盒子最短边的二分之一”，例如：

1
2
3
4
5
6
7
.box1{
//注意这是一个矩形，他的“盒子最短边的二分之一”为50px;
      height: 100px; 
      width: 200px;
      background-color: pink;
      border-radius: 50px;
    }

效果图：

image

当我们继续加大border-radius的值时，是没有任何效果的，这也是为什么我们无法用这种方法画出椭圆的原因。

不规则圆角

如果UI设计师告诉你，这个盒子四个圆角是不一样的，有大有小，也就是说这四个圆角的半径是不相同的，这个时候就要用到border-radius的拓展属性：

1
2
3
4
5
6
7
8
9
.box1{
      height: 200px;
      width: 200px;
      background-color: pink;
      border-top-left-radius: 100px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 25px;
    }

效果图：

image

我们也可以简写，从左上角顺时针开始：

1
2
3
4
5
6
.box1{
      height: 200px;
      width: 200px;
      background-color: pink;
      border-radius: 100px 50px 10px 25px;
    }

画一个半圆

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 200px 200px 0 0;
    }

效果图：

image

画一个四分子圆

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 200px;
      background-color: pink;
      border-radius: 200px 0 0 0;
    }

效果图：

image

垂直水平半径不相等(椭圆)的圆角

水平半径与垂直半径

以上我们都是基于标准圆来削去四个角，是无法得到一个椭圆形状的，为了让小伙伴们方便理解，我们先来介绍一个概念：水平半径与垂直半径：

image

如果要画一个椭圆，依照之前那种水平半径和垂直半径相等的圆角去削一个矩形是无法做到的，border-radius给我们提供了这样的方案：

1
border-radius：水平半径 ／ 垂直半径;

有了这个方案我们，我们就能画一个用椭圆“削”的圆角图形：

1
2
3
4
5
6
.box1{
      height: 100px;
      width: 200px;
      background-color: pink;
      border-radius: 70px / 30px;
    }

效果图：

image

画一个椭圆

当我们把水平半径设置为矩形长的二分之一，垂直半径设置为矩形宽的二分之一时候，那么就能完美地画一个椭圆啦：

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 100px / 50px;
    }

效果图：

image

画一个半椭圆

我们回想border-radius有四个角之分，那么我们是不是可以利用这一点画一个半圆呢：

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 200px 0 0 200px / 50px 0 0 50px;;
    }

效果图：

image

画一个四分之一椭圆

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 200px 0 0 0 / 100px 0 0 0;;
    }

效果图：

image

奇形怪状的图

画一个鸡蛋

1
2
3
4
5
6
.box1{
      width: 100px;
      height: 200px;
      background-color: pink;
      border-radius: 50px 50px 50px 50px/150px 150px 50px 50px;
    }

效果图：

image

千万要注意英文字符下的“/”和中文字符下的“／”是完全不一样的，小伙伴们不要写错了哦。

画一片树叶

1
2
3
4
5
6
.box1{
      width: 200px;
      height: 200px;
      background-color: green;
      border-radius: 200px 0 200px 0;
    }

效果图：

image

画一个爱心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style media="screen">
    .box{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
    }
    .box1{
      width: 100px;
      height: 170px;
      background-color: red;
      border-radius: 50px 50px 0px 0;
      transform-origin: 50px 50px;
      transform: rotate(-45deg);
    }
    .box2{
      width: 100px;
      height: 170px;
      background-color: red;
      border-radius: 50px 50px 0px 0;
      transform-origin: 50px 50px;
      transform: rotate(45deg);
    }
  </style>
  
  
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

效果图：

image

总结

这里只是抛砖引玉地讲解了基本原理，用border-radius可以画出很多有趣的图，当然我们也可以不必要都用px来写定了值，也可以用%来设置，只不过用px更不容易出错易控制，当需要自适应布局的时候，那么就需要用%来设置值。