原理

一张图说明问题：
image.png
其实就是我们认为指定圆的半径，圆和矩形相切的时候就是最终的效果了。

语法

border-radius:length;
  • 参数可以为数值或百分比的形式

数值：多少像素
百分比：半径为宽高的原宽高比例的多少
image.png

演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>圆角矩形</title>
  8.     <style>
  9.         div{
  10.             background-color: plum;
  11.         }
  12.         .radio{
  13.             width: 200px;
  14.             height: 200px;
  15.             border-radius: 100px;
  16.         }
  18.         .radioJiao{
  19.             width: 200px;
  20.             height: 100px;
  21.             margin: 20px;
  22.             margin-left: 0px;
  23.             border-radius: 50px;
  24.         }
  26.         .bord{
  27.             width: 200px;
  28.             height: 200px;
  29.             border-radius: 30px 10px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="radio"></div>
  35.     <div class="radioJiao"></div>
  36.     <div class="bord"></div>
  37. </body>
  38. </html>

image.png