一些小技巧-重构

 

• 用box-shadow制造浮雕效果
• 用box-shadow做简单的背景修饰
• 长页面背景图不够用
• ......

 

01

• 用box-shadow制造浮雕效果

demo示例：

 

示例的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示例：

 

像上面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示例：

 

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