CSS border-radius详解-CSDN博客

属性值：border-radius实际上包含8个值，可以写为border-radius: av bv cv dv \ ah bh ch dh；具体是由四个属性组成：

border-top-left-radius: ah av：左上角半圆的水平半径和垂直半径
border-top-right-radius: bh bh：右上角半圆的水平半径和垂直半径
border-bottom-right-radius: ch cv：右下角半圆的水平半径和垂直半径
border-bottom-left-radius: dh dv：左下半圆的水平半径和垂直半径
border-radius的百分比的基准是box-sizing: border-box，也就是说它的基准包含了元素自身的宽度+padding+border，基于上边的例子，如果我们给.circle添加宽度为10px的border需要变为60px
border-radius有一个大值特性，即对于一个div，其border-radius有一个临界最大值使其可以绘制为圆形，即使给定的border-radius值大于该值，浏览器会采用最小绘制；
根据上一条，当border-radius大于50%时，绘制的图形都是半径相同的圆形；

border-radius绘制圆形、椭圆、半圆、1/4圆的

通过调整div的宽高及border-radius的8个属性值，让你直观看到每个分值对生成图形的影响。代码演示截图如下：

在这里插入图片描述

代码实现，具体可见jsfiddle.net

	<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS图形绘制</title>
</head>
<body>
  <div class="wrapper">