Chapter2 背景與邊框

1. 半透明邊框

基礎(chǔ)：了解 RGBA & HSLA 顏色（色調(diào) 0~360、飽和度、亮度 （0%黑色~100%白色）、透明度）

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

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

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

?

2. 多重邊框

基礎(chǔ)：了解 box-shadow 的基本用法，常用于生成投影，可以接受四個(gè)參數(shù)，兩個(gè)偏移量，一個(gè)模糊值，一個(gè)擴(kuò)張半徑，它的好處在于支持逗號(hào)分隔語法，可以創(chuàng)建任意數(shù)量的投影

要注意的是擴(kuò)張半徑的設(shè)置：

background: pink; box-shadow: 0 0 0 10px #655,0 0 0 15px #357, //第二層的外框?qū)挾葘?shí)際是5px
0 0 0 25px #384, //第三層寬度實(shí)際為10px

如果只需要兩層邊框，可以用 outline（描邊來實(shí)現(xiàn)），它的優(yōu)點(diǎn)在于邊框樣式十分靈活。

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

?3. 背景定位

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

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

?4.條紋背景

規(guī)則：A顏色純色從色帶的0開始到20%結(jié)束，B顏色從色帶80%開始為純色

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

多色條紋：當(dāng)?shù)诙€(gè)色標(biāo)的位置值為0時(shí)，它的位置就會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置

同色系條紋：

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/? ? ? ? ? ? ? ? ? ? ? ? ? ?

更多專業(yè)前端知識(shí)，請上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。