Chapter2 背景與邊框

1. 半透明邊框

基礎：了解 RGBA & HSLA 顏色（色調 0~360、飽和度、亮度 （0%黑色~100%白色）、透明度）

默認情況下，背景在邊框的下層，容器的背景從半透明的邊框透上來并覆蓋了底層背景，如下圖：

（圖片均來自于本書所帶網站：http://play.csssecrets.io ，感謝作者的付出）

border: 10px solid hsla(0,0%,100%,0.5); background: white;
-------------------------------------------------- background-clip: padding-box; //用內邊距的外沿裁剪背景

?

2. 多重邊框

基礎：了解 box-shadow 的基本用法，常用于生成投影，可以接受四個參數，兩個偏移量，一個模糊值，一個擴張半徑，它的好處在于支持逗號分隔語法，可以創建任意數量的投影

要注意的是擴張半徑的設置：

background: pink; box-shadow: 0 0 0 10px #655,0 0 0 15px #357, //第二層的外框寬度實際是5px
0 0 0 25px #384, //第三層寬度實際為10px

如果只需要兩層邊框，可以用 outline（描邊來實現），它的優點在于邊框樣式十分靈活。

background： pink; border: 10px solid #655; outline: 5px solid deeppink; //虛線用dotted

?3. 背景定位

以前的定位方式使得圖片與容器之間沒有空隙，提供三種解決方案

background-position:right bottom; //默認情況下該屬性是以padding box為準的
------------------------------------------------------------------------------------
padding:10px
background:url(xxx.svg) no-reapt #334 background-position:right 20px bottom 10px; //該屬性現已擴張，允許我們在關鍵字前指定偏移量（1）
------------------------------------------------------------------------------------
background-orgin:content-box; //更改后以內容區的邊緣作為基準 （2）
------------------------------------------------------------------------------------
background-position：calc(100%-20px) calc(100%-10px); //calc()函數，以左上角偏移的思路考慮（3） ?

?4.條紋背景

規則：A顏色純色從色帶的0開始到20%結束，B顏色從色帶80%開始為純色

background:linear-gradient(#fb3,#58a); background:linear-gradient(#fb3 20%, #58a 80%); //20%為實色，從頂部開始計算百分比 background-size:100% 30px;//背景默認重復平鋪，形成條紋

多色條紋：當第二個色標的位置值為0時，它的位置就會被瀏覽器調整為前一個色標的位置

同色系條紋：

background: repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px); //修改較繁瑣
------------------------------------------------------------------------------------------
background:#58a;repeating-linear-gradient(30deg,
hsla(0,0%,100%,0.1),
hsla(0,0%,100%,0.1) 15px,
transparent 0, //表示透明
transparent 30px);

?

?

最后附上樣式庫：http://lea.verou.me/css3patterns/? ? ? ? ? ? ? ? ? ? ? ? ? ?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS揭秘（二）背景与边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。