话说,CSS3的事实标准出来那么久了,很多属性都开始去掉私有前缀了,如 box-show。如果你还不知道box-show是什么,那只能说你是个正常人类,不是前端攻城师,可以离开这里回去地球了。

既然你还在继续看到这,那么你可能知道box-shadow,不过我还是要讲概念,^_^。 box-shadow,顾名思义就是盒子阴影,可以给一个块级容器加上阴影或者发光效果。效果如下:

把阴影的颜色和透明度调整下,就可以整成发光效果了。不过今天的主角不是他。略过。

说回正事,这box-shadow虽然好用,可是有时还会遇到蛋疼的设计。 搞出只有一边的内阴影。而box-shadow最多只能做到剩下两边有阴影(看下面,看下面↓),这可愁死了咱这苦命的娃啊。more

不知道你囧没,反正我囧了~~

本着除非打死否则不用图片的思想, 还是被我找到了实现的方法,,嘿嘿~~先看看效果

demo啊,发疯地点这里

嗯咳,原理是用:before伪元素插入一个元素作为阴影的容器,绝对定位并铺满整个框。然后在这个容易用线性渐变画个背景就完成了。由于绝对定位,会覆盖到原本的内容,这时只要给阴影设置个 z-index: -1 据解决了。下面看看这神奇的代码~~

.gradient-shadow{
    position: relative;
}
.gradient-shadow:before{
    content: ' ';
    background: -webkit-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: -moz-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: -o-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: linear-gradient(top, #BBB,#EEE ,white 20%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: -1;
}

html

<div  class="gradient-shadow">
    <p>这里是只有一边的2B阴影</p>
</div>
Comments
Write a Comment
  • Dylan reply

    好文, thks!

  • dawn reply

    骗子,这明明是渐变,你却说是shadw。

  • iAzrael reply

    @dawn 这是用渐变做成了shadow的效果呀

  • 向先生 reply

    兄弟 6啊

  • 冯偌依 reply

    最后用渐变做的这个很巧妙,但是怎么做到一边黑色到透明的渐变呢?如果设置opacity的话,整体都会改变;用box-shadow,至少是两个边……

  • iAzrael reply

    @冯偌依 >> linear-gradient(top, #BBB,#EEE ,white 20%);就是自己手动设置颜色的分级呀,从黑色》灰色》白色

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟