前端知识点 --- border-Radius的四个角(css)

DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>border-radius示例title>
  <style>
    .box {
      width: 200px;
      height: 150px;
      background-color: #4CAF50;
      border-radius: 20% 5% 20% 5% / 5% 20% 5% 20%;
      border-radius: 20%/;
    }
  style>
head>

<body>
    

  <h2>带有不同水平和垂直圆角的示例h2>
  <div class="box">div>
body>

html>

前端知识点 --- border-Radius的四个角(css)_第1张图片
20% 5% 20% 5% / 5% 20% 5% 20%

前四个值是分别针对水平半径和竖直半径的顺序设置:

左上角:水平半径20%,竖直半径5%

右上角:水平半径5%,竖直半径20%

右下角:水平半径20%,竖直半径5%

左下角:水平半径5%,竖直半径20%

你可能感兴趣的:(css,前端,css)