css box-shadow详解,以及box-shadow立体按钮,box-shadow 四周阴影,box-shadow 单边阴影的实现
2017-01-17 23:41

box-shadow前言

box-shadow是css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。

box-shadow阴影用法

box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;


box-shadow参数解释

@1:inset

  有inset 则为内阴影,没有insert 则为外阴影,默认为外阴影。

@2:offset-x

 横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果有blur-radius值会有模糊效果。

@3:offset-y

纵向阴影的大小,值同offset-x。

@4:blur-radius

阴影的模糊程度,值越大,阴影越模糊。

@5:spread-radius

 阴影的扩大缩小,正值时,阴影扩大;负值时,阴影缩小,默认为0,和盒子同样大。


box-shadow实例应用中的探讨

内阴影的使用

.shadowdemo{
    width:120px;
    height:120px;
    background:#FAF223;
    box-shadow:inset 2px 2px 8px #065EAF;
}


效果如下:

inset.png

使用insert的时候offset-x,offset-y的值的意义和外阴影是相反的,正值是左边,上边。负值是右边,下边。

.shadowdemo{
    width:120px;
    height:120px;
    background:#FAF223;
    box-shadow:inset -2px -2px 8px #065EAF;
}


效果如下:

insetoffset.png

很想我们的立体按钮。

以此,我们可以利用box-shadow特性实现一个3D立体效果,效果如下

3dbtn.png

不够真切?你可以点击查看box-shadow的3D按钮

代码如下:

.shadowdemo{
    display:inline-block;
    line-height:33px;
    height:36px;
    padding:0 2em;
    font-size:13px;
    background:#0C58A7;
    box-shadow:inset -3px -3px 2px #050533;
    text-decoration: none;
    color:#fff;
    border-radius: 4px;
    vertical-align:middle;
}
.shadowdemo:active{
    line-height: 39px;
    box-shadow:inset 2px 3px 2px #050533;
}
<a href="javascript:;" class="shadowdemo">我是按钮</a>

我们用:active伪类来实现按下时效果的动画,通过box-shadow的inset的内阴影的转换,形成视界上突出和凹陷的效果。这里值得讲的是height和line-height的使用,height用来定死高度,然后通过line-height的高度变化实现active时文字的下移效果,更逼真3D效果。

没有按下时:line-height=height-offsety,

按下active时:line-height=height+offsety。

外阴影的使用

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 4px 4px 8px #000;
}

效果如下:

outshadow.png

这个外阴影是我们常用的效果,蓝色的div看起来很有浮于页面的上层。

下面我们来个例子看一下spread-radius阴影扩大缩小的作用

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 4px 4px 8px 6px #000;
}

效果如下:

spread.png

这里的代码比上一个外阴影多了6px的spread-radius的扩大阴影。我们可以看到他的作用是把阴影的大小向外扩大了,左边和上边也出现了明显的阴影效果。

阴影的单位我们还可以使用rgba等有透明效果的阴影。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 4px 4px 8px  rgba(0,0,0,0.5);
}

效果如下:

shadowrgba.png

效果明显比#000的阴影效果轻很多。阴影效果会跟随元素的圆角也会显示圆角的阴影。并且外阴影效果会和外阴影合并,内阴影效果会和内阴影合并,外阴影效果不会和内阴影效果不会合并。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    border-radius:8px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.5),
                4px 5px 3px #05A623,
                inset 4px 4px 8px #000;
}

效果如下:

boxshaowcollapse.png

外阴影的黑色和绿色合并了,但是没有和内阴影合并,并且无论是内阴影,外阴影都是跟随了div的圆角产生了圆角效果。

box-shadow四周阴影实现

通过对box-shadow使用的理解,我们想要一个div的四周都有阴影的话,可能首先想到的是通过box-shadow的四周阴影叠加来实现。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.8),
                -6px -6px 8px rgba(0,0,0,0.8);
}

效果如下:

boxshadowarround.png

很明显,这个四周阴影的效果很不符合预期,缺少了2个角的阴影,这种方式实现四周阴影是不行的。但是box-shadow还有一个属性spread-radius用来扩大阴影,我们可以借助它来实现四周阴影。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);
}

效果如下:

arroundshadow.png

这个四周阴影的效果实现的很好,这里我们offset-x,offset-y都设置为0,也就是阴影都在div后面,我们通过第4个参数spread-radius来扩大阴影的范围,让它向四周扩大6px,那么就能实现四周阴影的效果。

box-shadow单边阴影实现

box-shadow的单边阴影效果的实现同样要借助spread-radius参数来实现。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 8px 2px 4px -2px rgba(0,0,0,0.8);
}

效果如下:

onesideboxshadow.png

实现原理很简单,右边阴影8px,下边阴影2px,我们通过spread-radius把阴影范围缩小了2px,那么下边阴影就隐藏到了div元素的后面,右边的阴影留在外面的就剩下了6px。这样单边阴影的效果就实现了,你可以根据需要选择哪个边有阴影。不过如果你细心的话可以看到下面还是有略微的阴影效果,这个是blur-radius造成的,那么我们的spread-radius要设置为 2px+6px=8px,那么下边就完全没有阴影了。

.outshadow{
    width:120px;
    height:120px;
    background:#0C58A7;
    box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8);
}

效果如下:

absoneshadow.png

仔细看这个,下面完全没有一点阴影的迹象了。

写了一个demo,你可以点击查看box-shadow单边阴影和四周阴影的效果

box-shadow结语

box-shadow的一些特殊效果主要通过第四个参数spread-radius来实现,它是一个很有用的参数,掌握它,发挥你的想象力和创造了,能创造好多炫丽的阴影效果。从相邻的这几遍文章,如果你都看了的话,就会发现这实际应用,工作中,我们有一些效果的实现走了很大的弯路。原因就是我们对基础标签,基础css的理解不透彻导致的,并且网上有很多文章都是复制转载过来的,没有做过任何实践,不负责任的文章浪费了我们的时间,限制了我们的思维。也许有些笔者也不得已,你不天天更新文章,百度可能就不鸟你,不收录你。而你要天天更新文章,好多笔者是工作之余时间来写文章的,一天两天还能坚持,时间长了,坚持不下来,所以就只能找别人的文章复制。个人感觉,百度声称的净化网络环境所采用的一些算法啊,策略啊,都说的很好听,我们让原创文章能够保护知识产权,其实呢,并没有卵用。其更大的作用是让好多辛辛苦苦的站长,笔者得不到收录,得不到点击量,也让用户找不到自己想要的东西。



原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(15648)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1