- 用box-shadow制造浮雕效果
- 用box-shadow做简单的背景修饰
- 长页面背景图不够用
- ......
01
- 用box-shadow制造浮雕效果
demo示例：
src="http://demo.zhangruojun.com/static/demo/demo001/" frameborder="0" width="414" height="650">
示例的html结构：
<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的圆圈圈背景，形状规则，且纯色的，可以不用切图，用
box-shadow.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参数和v-shadow参数用来控制阴影的距离。
spread参数我们日常比较少用，在我们demo的场景可以直观地看到，阴影的尺寸就是这个参数控制的。参数的值可以是整数，也可以是负数。具体的计算规则是：
阴影的高度 = (主体元素的高度 / 2 spread) * 2;
阴影的宽度 = (主体元素的宽度 / 2 spread) * 2;03
- 长页面背景图不够用
场景：我们已经有了一张设计师给的很长的背景图片，但是由于内容高度的不确定，可能在实际场景下底部还是会有背景图片覆盖不到的情况，用纯色填充又会有明显的分界线。
设置
background-size: 100% 100%;background将原来的背景图片从底部切出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/
