深入理解CSS3的border-radius

Ryan757
965 阅读7分钟

一、前言

虽然以前有太多的时候用到了border-radius，但因为当时对它的浅层理解能满足业务需求，并没有真正深入了解这个前端基础知识点。这次又遇到了圆角需求，正好就全面深入学习一遍。

二、与CSS差异

CSS3 和 CSS 的 border-radius 属性在本质上是相同的，都用于控制元素的边框圆角。然而，它们之间有一些区别，主要是版本和支持的特性：

  1. 版本：

    • CSS border-radius 是 CSS2.1 的一部分，它是 CSS2 的扩展。这是 CSS 的早期版本，具有基本的圆角控制功能。
    • CSS3 border-radius 是 CSS3 的一部分，是新一代 CSS 规范的一部分。它引入了更多高级的圆角控制功能，如椭圆形的圆角、不同角落的不同圆角半径等。

  2. 功能：

    • CSS border-radius 允许你控制元素的四个角的圆角半径，但这些半径必须相同。
    • CSS3 border-radius 扩展了功能，允许你为每个角独立指定不同的圆角半径，也支持创建椭圆形的圆角。

示例：

cssCopy code
/* CSS border-radius，所有角的半径相同 */
.element {
  border-radius: 10px;
}

/* CSS3 border-radius，不同角的半径可以不同 */
.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 40px;
}

总的来说，CSS3 border-radius 提供了更大的灵活性，允许开发者更精细地控制元素的圆角效果。

三、语法：

border-radius: none || {length|| percentage}（1~4）/ {length || percentage}(1~4);

length: 由浮点数和单位标识符组成的长度值，不可以取负值。比如px、%、em

percentage: 相对于元素的占据尺寸的百分比，也就是 border+padding+width

border-radius是一种缩写方法，如果”/”前后的值都存在，那么”/”前面的值设置其水平半径，”/”后面的值设置其垂直半径。如果没有”/”则水平和垂直相等，另外四个值是按照top-left、top-right、bottom-right、bottom-left的顺序设置的。  

  1. 取值：

<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

  1. 说明

    1. 缩写

    border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

    1. border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

    2. border-radius:[ {1,4} ]  [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值

    3. border-radius:[ {1,4} ]   [ {1,4} ]   [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

    4. border-radius:[ {1,4} ]   [ {1,4} ]  [ {1,4} ]   [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

    前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，他们都是先Y轴在X轴，具体看下面：

    border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

    各角拆分出来取值方式： 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

    1. 形状

    圆角形状的底层原理：以第一个length为宽，第二个length为高，画一个椭圆（宽高一样时，就是正圆），并在该圆角区域，保留这个椭圆（或正圆）和原本形状重叠的部分，去掉其它部分。

    1. 单位为%

    当border-radius单位为%时，最后实际的length是根据宽高乘以这个百分比计算出的结果。 比如：

    div {
    width:200px;
    height:100px;
    border-radius:50%;
}

    相当于:

    div {
    width:200px;
    height:100px;
    border-radius:100px/50px;
}
    1. 特性

      使用一个大于宽高中最小的那个值的时候，宽高默认选择二者最小的值来作为border-radius实际值。如果尺寸不够，则会根据宽高的值，等比例缩小。

      第一种情况：只对一个角操作。宽高相同时。比如：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-top-left-radius: 300px;
}

      实际显示结果相当于如下：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-top-left-radius: 200px;
}

      第二种情况：只对一个角操作。宽高不同时。比如：

      // 宽高不同时
div {
    width:400px;
    height:200px;
    border-top-left-radius: 300px;
}

      显示结果相当于如下：

      // 宽高不同时
div {
    width:400px;
    height:200px;
    border-top-left-radius: 200px;
}

      第三种情况：对多个角操作。宽高相同时。比如：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-radius: 300px;
}

      实际显示结果相当于如下：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-radius: 100px;
}

      第四种情况：对多个角操作。宽高不同时。比如：

      // 宽高不同时
div {
    width:400px;
    height:200px;
    border-radius: 300px;
}

      显示结果相当于如下：

      // 宽高不同时
div {
    width:400px;
    height:200px;
    border-radius: 100px;
}

      第五种情况：对多个角操作。带纵向值。宽高相同时。比如：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-radius: 300px / 100px;
}

      实际显示结果相当于如下：

      // 宽高相同时
div {
    width:200px;
    height:200px;
    border-radius: 150px / 50px;
}

    以上示例也就解释了，对于一个宽大于高的元素来说，为什么在不确定元素具体宽高的情况下，使用border-radius: 99999999999px这种方式，可以给元素设定大小等于高度一半的border-radius。具体就是因为99999999999px一般是大于宽高。这时99999999999px就会按宽高中的最小值，也就是高，来等比例缩小到高度的50%。

    1. 案例

    根据所学到的知识和网上的分享，自己也利用border-radius做了个水滴动画

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <title>点亮按钮</title>
      <style>
        .container {
          height: 100vh;
          width: 100vw;
          background-color: cadetblue;
          display: flex;
          flex-direction: column;
          position: relative;
        }
        .water-drop {
          color: aliceblue;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          animation: waterDrop 2s ease-in-out infinite;
      }

      @keyframes waterDrop {
          0% {
              width: 50px;
              height: 50px;
              font-size: 16px;
              border-radius: 50%;
              box-shadow: 
              inset 10px 20px 30px rgba(0,0,0,0.5),
              10px 10px 20px rgba(0,0,0,0.3),
              15px 20px 30px rgba(0,0,0,0.05),
              inset -2px -2px 15px rgba(255,255,255,0.8);
          }
          50% {
              width: 200px;
              height: 200px;
              font-size: 40px;
              border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
              box-shadow: 
              inset 10px 20px 30px rgba(0,0,0,0.5),
              10px 10px 20px rgba(0,0,0,0.3),
              15px 20px 30px rgba(0,0,0,0.05),
              inset -10px -10px 15px rgba(255,255,255,0.8);
          }
          100% {
              width: 200px;
              height: 200px;
              font-size: 40px;
              border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
              box-shadow: 
              inset 10px 20px 30px rgba(0,0,0,0.5),
              10px 10px 20px rgba(0,0,0,0.3),
              15px 20px 30px rgba(0,0,0,0.05),
              inset -10px -10px 15px rgba(255,255,255,0.8);
          }
      }
      </style>
    </head>

    <body>
      <div class="container">
        <div class="water-drop">水滴</div>
      </div>
    </body>
    </html>
avatar
文章
阅读
粉丝