[CSS]《CSS揭祕》第二章——背景與邊框

半透明邊框

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

相關語法：

background-clip: border-box|padding-box|content-box;

多重邊框

box-shadow方案

box-shadow: 0 0 0 10px red,
                0 0 0 15px green,
                0 2px 5px 20px white;

*：須要注意的是，上面所建立的邊框是僞邊框，並不響應鼠標事件。

outline方案（僅可建立雙重邊框）

border: 5px solid red;
    outline: 10px solid green;

背景定位

background-position方案

background: url(2.jpg) no-repeat;
    width: 100%;
    height: 100%;
    background-position: right 10px bottom 10px;

*：只有background-image時，須要設置基礎大小，否則不會顯示，由於背景圖片不會撐開div。

background-origin方案

background-position默認是以padding-box爲準，經過background-origin能夠設置爲content-box。

calc方案

background: url(2.jpg) no-repeat;
background-position: calc(100% - 10px) calc(100% - 10px);

*：calc以左上角爲基準。
**：calc裏的加減運算負先後必須有空格，這是爲了向前兼容。

邊框內圓角

color: white;
    background:black;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em red;
    outline: .6em solid red;

條紋背景

水平條紋

background:linear-gradient(gray 30%,pink 70%);//漸變
background:linear-gradient(gray 30%,pink 30%);//不漸變

*：若是咱們把第二個色標的位置值設置爲 0， 那它的位置就老是會被瀏覽器調整爲前一個色標的位置值。

垂直條紋（重複）

background:linear-gradient(90deg,red 50%,blue 0);
    background-size:  50% 100%;

斜向條紋

background:repeating-linear-gradient(60deg,#fb3 0px,#fb3 15px,#58a 15px,#58a 30px);//角度，條紋1的漸變顏色1 起點，條紋1的漸變顏色2 終點，條紋2的漸變顏色1 起點，條紋2的漸變顏色2 終點；

同色繫條紋

background:#58a;
    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1),15px,transparent 0,transparent 30px);

複雜的背景圖案

網格

background:#58a;
    background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
    background-size: 30px 30px;

波點

background:#655;
    background:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);;
    background-size: 30px 30px;
    background-position: 0 0 ,15px 15px;

*：爲了達到效果，第二層的偏移量必須爲貼片寬度的一半。

圖像邊框

連續的圖像邊框

padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white,white),url(./2.jpg);
    background-size: cover;
    background-clip: padding-box,border-box;
    background-origin: border-box;

*：background-clip 屬性規定背景的繪製區域。

復古信封

padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);