详解：22 border-radius_综合

核心：记住，如果只写一个的话，代表四个角都变化
记住：如果写两个的话。代表左上角与右下角一样，右上角与左下角一样
记住：如果三个值的话，代表左上角右上角左下角
如果四个值的话，代表顺时针，从左上角----右上角—右下角—左下角
记住：border-top-left-radius: 80px 40px;这样的，都是上下然后左右的写的时候勒，80px是水平，然后是40px垂直

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{
    padding: 0px;margin: 0px;}#container div{
    width: 100px;height: 100px;border: 3px solid red;background-color: red;margin: 10px;}.box1{
    border-radius: none;}.box2{
    border-radius: 10px;}.box3{
    border-radius: 20px 40px;/*如果两个的话。是左上角---右下角,然后是右上角----左下角*/}``.box4{
    border-radius:  10px 20px 30px;/*左上角--然后是右上角---左下角，然后是右下角*/}.box5{
    border-radius: 10px 20px 30px 40px;/*顺时针把，从左上角开始把*/}.box6{
    border-top-left-radius: 80px 40px;/*先以上下开始然后第三个是左右把*/}/*水平 垂直*/</style>
</head>
<body><div id="container"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div><div class="box7"></div><div class="box7"></div><div class="box8"></div><div class="box9"></div></div>
</body>
</html>