背景與邊框
一 半透明邊框 rgba/hsla顏色
1.難題
假設我們想給乙個容器設定一層白色背景和一道半透明白色邊框，body
的背景會從它的半透明邊框透上來。我們最開始的嘗試可能是這樣的：
#border
但實際上看不到邊框，邊框去哪兒了？
2.解決方案
儘管看起來並不像那麼回事，但我們的邊框其實是存在的。預設情況下，
背景會延伸到邊框所在的區域下層。
在css 2.1 中，這就是背景的工作原理。
可以通過background-clip 屬性來調整上述預設行為所帶來的不便。
#border
二 多重邊框
box-shadow的基本用法
1.難題
我們通常希望在css **層面以更靈活的方式來
調整邊框樣式。因此，網頁開發者們最終不得不折騰出各種醜陋的hack，比
如使用多個元素來模擬多重邊框。不過，我們還有更好的辦法來解決這個難
題，並不需要新增無用的額外元素來汙染我們的結構。
2.box-shadow 方案
box-shadow接受4個引數，第4個引數擴充套件半徑
乙個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值，
得到的「投影」其實就像一道實線邊框
#border
唯一需要注意的是，box-shadow 是層層疊加的，第一層投影位於最頂
層，依次類推。因此，你需要按此規律調整擴張半徑。比如說，在前面的代
碼中，我們想在外圈再加一道5px 的外框，那就需要指定擴張半徑的值為
15px（10px+5px）。如果你願意，甚至還可以在這些「邊框」的底下再加一
層常規的投影：
#border
多重投影解決方案box-shadow注意：
1> 投影的行為跟邊框不完全一致，因為它不會影響布局，而且也不會
受到box-sizing 屬性的影響。不過，你還是可以通過內邊距或外邊
距（這取決於投影是內嵌和還是外擴的）來額外模擬出邊框所需要
佔據的空間。
2> 上述方法所建立出的假「邊框」出現在元素的外圈。它們並不會響
應滑鼠事件，比如懸停或點選。如果這一點非常重要，你可以給
box-shadow 屬性加上inset 關鍵字，來使投影繪製在元素的內圈。
請注意，此時你需要增加額外的內邊距來騰出足夠的空隙。
3.outline 方案
在某些情況下，你可能只需要兩層邊框，那就可以先設定一層常規邊
框，再加上outline（描邊）屬性來產生外層的邊框。
#border
你可以通過outline-offset 屬性來控制它跟
元素邊緣之間的間距，這個屬性甚至可以接受負值。
outline 方案注意：
1> 它只適用於雙層「邊框」的場景，因為 outline 並不能
接受用逗號分隔的多個值。如果我們需要獲得更多層的邊框，前一
種方案就是我們唯一的選擇了。
2> 邊框不一定會貼合border-radius屬性產生的圓角，因此如果元素
是圓角的，它的描邊可能還是直角的。請注意，這種行為被css
工作組認為是乙個bug，因此未來可能會改為貼合borderradius圓角。
三 靈活的背景定位
1.background-position 的擴充套件語法方案
背景與容器底部和右部距離
#bg
2.background-origin 方案
background-origin屬性指定了背景影象的位置區域 預設是padding-box
content-box, padding-box,和 border-box區域內可以放置背景影象
#bg
3.calc() 方案
把背景定位到距離底邊10px 且
距離右邊20px 的位置。如果我們仍然以左上角偏移的思路來考慮，其實
就是希望它有乙個100% - 20px 的水平偏移量，以及100% - 10px 的垂直
偏移量。
#bg
四 邊框內圓角
1.難題
有時我們需要乙個容器，只在內側有圓角，而邊框或描邊的四個角在外
部仍然保持直角的形狀，如圖2-15 所示。這是乙個有趣的效果，目前還沒
有被濫用。用兩個元素可以實現這個效果，這並沒有什麼特別的：
.something-meaningful .something-meaningful > div
有沒有辦法可以只用乙個元素達成同樣的效果呢？
2.解決方案
描邊並不會跟著元素的圓角走
因此，如果我們把這兩者疊加到一起，box-shadow
會剛好填補描邊和容器圓角之間的空隙，
這兩者的組合達成了我們想要的效果:
.something-meaningful
到底多大的投影擴張值box-shadow可以填補這些空隙呢？
請注意，該計算過程揭示了這個方法的另乙個限制：為了讓這個效果得
以達成，擴張半徑需要比描邊的寬度值小，但它同時又要比( 2 −1)r大
（這裡的r 表示 border-radius）。這意味著，如果描邊的寬度比 ( 2 −1)r 小，
那我們是不可能用這個方法達成該效果的。
五 條紋背景
1.難題
不論是在網頁設計中，還是在其他傳統媒介中（比如雜誌和牆紙等），
各種尺寸、顏色、角度的條紋圖案在視覺設計中無處不在。要想在網頁中實
現條紋圖案，其過程還遠遠不夠理想。通常，我們的方法是建立乙個單獨的
位**件，然後每次需要做些調整時，都用影象編輯器來修改它。可能有人
試過用svg 來取代位圖，但這樣還是會有乙個獨立的檔案，而且它的語法
也遠遠不夠友好。如果可以直接在css 中建立條紋圖案，那該有多棒啊！
你可能會驚訝地發現，我們居然真的可以。
2.解決方案 linear-gradient(#fb3,#58a)
#bg
如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域，
過渡的起止色分別是第乙個和最後乙個指定值。從效果上看，顏色會在那
個位置突然變化，而不是乙個平滑的漸變過程
#bg
如果某個色標的位置值比整個列表中在它之前的色標的位置值都要
小，則該色標的位置值會被設定為它前面所有色標位置值的最大值
#bg/*多種顏色：
*/#bg
3.垂直條紋
垂直條紋的**跟水平條紋幾乎是一樣的，差別主要在於：我們需要在
開頭加上乙個額外的引數來指定漸變的方向。在水平條紋的**中，我們其
實也可以加上這個引數，只不過它的預設值to bottom 本來就跟我們的意
圖一致，於是就省略了。最後，我們還需要把background-size 的值顛倒
一下，
#bg
4.斜向條紋
#bg
5.更好的斜向條紋
我們還有更好的方法來建立斜向條紋。乙個鮮為人知的真
相是linear-gradient() 和radial-gradient() 還各有乙個迴圈式的加強
版：repeating-linear-gradient() 和repeating-radial-gradient()。
它們的工作方式跟前兩者類似，只有一點不同：色標是無限迴圈重複的，直
到填滿整個背景。下面是乙個重複漸變的例子
#bg
6.靈活的同色系條紋
#bg
但我們現在只需要修改乙個地方
就可以改變所有顏色了。我們還得到了乙個額外的好處，對於那些不支援
css 漸變的瀏覽器來說，這裡的背景色還起到了回退的作用。
六 複雜的背景圖案
css 漸變在實現這些圖案時也能大展拳腳。用css 漸變
來建立任何種類的幾何圖案幾乎都是可能的，只不過有時這種方法不太實
際。1.網格
七 偽隨機背景
八 連續的影象邊框
CSS揭秘 背景與邊框
css編碼技巧 font size 20px line height 1.5 1.半透明邊框 border 10px solid hsla 0,0 100 5 background white background clip padding box 2.多重邊框 background yellowg...
《css揭秘》之背景與邊框
這本書是魔法哥的譯著，也是買了有很長時間了，現在開始慢慢閱讀，確實比較新穎，包含了很多css方面的小tips。來一點點的做個總結。關於半透明我們可能會想到使用rgba,opacity等等，對於背景提供回退方案還是比較好做的，要麼利用一張單畫素半透明，要麼回退到實色。但是對於其他屬性，比如邊框我們就只...
CSS揭秘 背景與邊框（2） 多重邊框
有些情況下，為了滿足一些要求，普通的邊框有點達不到我們的需求，這時我們可以使用多重邊框。box shadow屬性可以設定乙個或多個下拉陰影的框。語法 box shadow h shadow v shadow blur spread color inset 值 說明h shadow 必需的。水平陰影的...