border-radius詳解

1.border-radius能夠同時設置1到4個值。簡潔法
    若是設置1個值，表示4個圓角都使用這個值。
    border-radius:40px;

    若是設置兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。
    border-radius: 10px 50px;

    若是設置三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。
    border-radius: 10px 50px 40px;

    若是設置四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。
    border-radius: 10px 20px 30px 40px;

2.單獨設置一個角的寫法
border-top-left-radius: 20px; //設置左上角
border-top-right-radius: 20px; //設置右上角
border-bottom-left-radius: 20px; //設置左下角
border-bottom-right-radius: 20px; //設置左下角

3.CSS畫實心圓(寬度和高度保持一致，而且設置border-radius:50%)

代碼:

.circle{
            width: 150px;/*寬高保持一致*/
            height: 150px;
            line-height: 150px; /*當高度與行高保持一致時爲垂直居中*/
            border-radius: 50%;
            background: orange;
            margin: 50px;
            text-align: center;
            color: #fff;
        }

<div class="circle">圓形</div>