Web前端——边框圆角（圆形，三角形）

1.设置边框圆角

   

            /* border-radius: 20px; */
            border-radius: 20px 40px 60px 80px;
            /* 简写的四个值代表的四条边如下 */
            border-top-left-radius: 20px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 80px;

2.圆形 

2.1一个圆

高和宽一比一，圆角1/2倍宽

        .1 {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }

2.2半圆

宽和高二比1，圆角1/2倍宽

        .2 {
            width: 100px;
            height: 50px;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
        }

2.3四分之圆

宽和高一比一，圆角一倍

        .3 {
            width: 50px;
            height: 50px;
            border-top-left-radius: 50px;
            /*border-top-right-radius: 50px;*/
            /*border-bottom-left-radius: 50px;*/
            /*border-bottom-right-radius: 50px;*/
        }

3.三角形