背景與邊框

一、半透明邊框
默認情況下背景的顏色會延伸至邊框下層。在css3中我們可以設置background-clip:padding-box(這個屬性的默認值爲border-box)來裁剪，從而取消默認行爲。
下面介紹實現半透明邊框的兩種方式：

1.使用rgba方式

border:10px solid rgba(255,255,255,0.5)

2. 使用hsla方式

background:white;
border:10px solid hsla(0,0%,100%,0.5);
background-clip:padding-box;

HSLA(H,S,L,A)的參數說明：
H：Hue(色調) 0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值爲：0 - 360
S：Saturation(飽和度)。取值爲：0.0% - 100.0%
L：Lightness(亮度)。取值爲：0.0% - 100.0%
A：Alpha透明度。取值0~1之間。
二、多重邊框
(1)box-shadow實現多重邊框

<!--dom-->
<div class="box">
</div>

<!--style-->
.box {
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
    width: 250px;
    height: 250px;
}

下面對box-shadow屬性作一下簡單總結：
語法：
box-shadow:水平陰影的位置，垂直陰影的位置，模糊距離，陰影尺寸，顏色，inset(設置爲內陰影，默認爲外陰影)
多個陰影可用逗號隔開，這些陰影是層疊在一起的，所以陰影尺寸要設置好。
(2)outline實現多重邊框
要實現上圖多邊框同樣的效果，也可以通過outline實現。

<!--dom-->
<div class="box">
</div>


<!--style-->
.box {
   background: yellowgreen;
   outline: 5px solid deeppink;
   border: 10px solid #655;
   width: 250px;
   height: 250px;
}

outline的語法同border，當然我們也可以通過outline-offset屬性來設置外邊框相對box的位置。
三、靈活的背景定位
(1)background-position屬性能夠控制背景圖片的位置，我們可以通過下面的語法來靈活控制背景圖的位置：

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;

(2)通過background-origion屬性控制已經設定好位置的背景圖片跟着內邊距走。

默認情況下，background-position中的right bottom 都是相對於 padding box的，我們可以改變這一默認行爲，設置background-origin:content-box
(3)通過calc()函數來設置背景圖片偏移距離

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px)

四、邊框內圓角

要實現這種效果，我的第一反應是，外層一個有顏色的div,內層一個有圓角的div，這樣就可以實現。

下面我們介紹只用一個dom元素來實現這種效果的辦法：

這個方法有一個注意點：
如果border是圓角 box-shadow會隨邊框出現圓角，outline仍然是直角。
所以要通過合理設置box-shadow的擴張值來解決上述事實造成的問題：

五、條紋背景
水平條紋

.box {
   width: 250px;
   height: 250px;
   background: linear-gradient(#fb3 30%, #58a 0);
   background-size: 100% 50px;
}

三種顏色的水平條紋

        .box {
            width: 250px;
            height: 250px;
            background: linear-gradient(#fb3 33.3%,
                    #58a 0, #58a 66.6%, yellowgreen 0);
            background-size: 100% 100px;
        }

垂直條紋

background: linear-gradient(to right, /* 或 90deg */
#fb3 50%, #58a 0);
background-size: 30px 100%

斜向條紋
只要改變第一個角度參數就可以調整方向，to bottom爲默認方向 0deg

六、連續的圖像邊框

在只有一個dom的情況下實現上圖的效果：
(1)border-image屬性

.box {
   width: 400px;
   height: 200px;
   padding: 10px;
   border: 10px solid transparent;
   border-image: url(./img/bg.jpg) 30 30 round;
}

(2)使用background-clip和漸變

   .box {
     width: 400px;
     height: 200px;
     padding: 10px;
     border: 10px solid transparent;
     background: linear-gradient(white, white), url(./img/bg.jpg);
     background-size: cover;
     background-clip: padding-box,border-box;
       }

背景疊加兩層，第一層爲白色漸變，第二層爲背景圖，再通過background-clip分別將第一層的padding-box裁剪和第二層的border-box裁剪就能實現上面的效果啦!