邊框與圓角

CSS3圓角

border-radius屬性

一個最多可指定四個border-*-radius屬性的複合屬性，這個屬性允許你為元素新增圓角邊框。

        div {
            width: 800px;
            height: 300px;
            border: 5px solid red;
            margin: 0 auto;
            /*border-radius: 5px;*/
            border-radius: 50%;
        }

CSS3指定每個圓角

多值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

順時針。

三個值：第一個為左上角，第二個值為右上角和左下角，第三個值為右下角。

      div {
            width: 800px;
            height: 300px;
            border: 5px solid red;
            margin: 0 auto;
            border-radius: 30px 50px 70px 100px;
        }

        div {
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
        }
        div::before,
        div::after{
            position: absolute;
            content: '';
            display: block;
            border: 1px solid #000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
        }
        div::before {
            width: 50px;
            height: 50px;
            bottom: -25px;
            right: 25px;
        }
        div::after {
            width: 20px;
            height: 20px;
            bottom: -75px;
            right: 0;
        }

CSS3盒陰影

box-shadow屬性

box-shadow屬性可以設定一個或多個下拉陰影的框

語法：box-shadow: inset hoff voff blur color;

CSS3邊界圖片

border-image屬性
使用border-image-*屬性來構建美麗的可擴充套件按鈕

語法: border-image: source slice width outset repeat;
source: 指定要使用的影像。