?

• 用box-shadow制造浮雕效果
• 用box-shadow做簡單的背景修飾
• 長頁面背景圖不夠用
• ......

?

01

• 用box-shadow制造浮雕效果

demo示例：

src="http://demo.zhangruojun.com/static/demo/demo001/" frameborder="0" width="414" height="650">

?

示例的html結(jié)構(gòu)：

<div class="box"> <div class="box-hd"><h2 class="tit">浮雕效果</h2></div><div class="box-bd"></div> </div>

css:

.box {position: relative; border-radius: rem(40px); overflow: hidden; box-shadow: rem(4px) rem(14px) rem(23px) rgba(134, 120, 37, .28), rem(-4px) rem(14px) rem(23px) rgba(134, 120, 37, .28);@at-root {.box-hd {height: rem(78px); background: #ff3e5d; box-shadow: inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .13) ,inset rem(10px) 0 rem(10px) rgba(255, 255, 255, .13) ,inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .13) ,inset 0 rem(-10px) rem(10px) #e63544;}.box-bd {height: rem(200px); background: #fff4c2; box-shadow: inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .32) ,inset rem(10px) 0 rem(10px) rgba(255, 255, 255, .32) ,inset 0 rem(-15px) rem(10px) rgba(249, 216, 159, .8); } } }

?

?

02

• 用box-shadow做簡單的背景修飾

demo示例：

src="http://demo.zhangruojun.com/static/demo/demo002/" frameborder="0" width="414" height="650">

?

像上面demo的圓圈圈背景，形狀規(guī)則，且純色的，可以不用切圖，用

box-shadow來實現(xiàn)。

.box {&:before {content: ''; position: absolute; top: rem(52px); left: rem(24px); width: rem(115px); height: rem(115px); border-radius: 100%; background: #e81236; box-shadow: rem(240px) rem(4px) 0 rem(-42px) #e81236, rem(175px) rem(158px) 0 rem(-18px) #e81236, rem(320px) rem(280px) 0 rem(-42px) #e81236, rem(400px) rem(317px) 0 rem(-10px) #e81236, rem(300px) rem(435px) 0 0 #e81236, rem(450px) rem(500px) 0 rem(-32px) #e81236, rem(72px) rem(635px) 0 rem(-5px) #e81236;} }

①

box-shadow屬性可以添加多個陰影。

②

box-shadow: h-shadow v-shadow blur spread color inset;。

h-shadow參數(shù)和v-shadow參數(shù)用來控制陰影的距離。

spread參數(shù)我們?nèi)粘１容^少用，在我們demo的場景可以直觀地看到，陰影的尺寸就是這個參數(shù)控制的。參數(shù)的值可以是整數(shù)，也可以是負(fù)數(shù)。具體的計算規(guī)則是：

陰影的高度 = (主體元素的高度 / 2 spread) * 2; 陰影的寬度 = (主體元素的寬度 / 2 spread) * 2;

?

03

• 長頁面背景圖不夠用

場景：我們已經(jīng)有了一張設(shè)計師給的很長的背景圖片，但是由于內(nèi)容高度的不確定，可能在實際場景下底部還是會有背景圖片覆蓋不到的情況，用純色填充又會有明顯的分界線。

設(shè)置

background-size: 100% 100%;的話，背景圖會被拉伸變形。

background屬性可以設(shè)置多張背景圖，我們可以用這個來解決問題。

將原來的背景圖片從底部切出1px的圖片出來。

然后給容器添加兩張背景圖，一張(PS: bg1.jpg，為了方便顯示，demo給出的是一張高度比較小的圖片，實際場景會高很多)正常大小顯示，另一張（PS:切出來的1px高度的圖片bg2.jpg）拉伸鋪滿：

.wrap {background-color: #5e3427;background-image: url(../img/bg1.jpg), url(../img/bg2.jpg);background-size: 100%, 100% 100%;background-repeat: no-repeat; }

demo示例：
src="http://demo.zhangruojun.com/static/demo/demo003/" frameborder="0" width="414" height="630">

?

原文地址：http://zhangruojun.com/-xie-xiao-ji-qiao/

?

總結(jié)

以上是生活随笔為你收集整理的一些小技巧-重构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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