box-shadow单边阴影写法

box-shadow是css3属性，用于向框添加一个或多个阴影，ie9+以及火狐、chrome、opera均兼容。

操作方法

  • 01

    语法： box-shadow: h-shadow   v-shadow   blur   spread   color   inset; (box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色  内部阴影;) 水平阴影、垂直阴影值必填，其余值可选； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3属性</title> <style type="text/css"> div.a { width: 200px; height: 200px; margin: 20px auto; border: 1px solid #CCCCCC; box-shadow: 10px 20px 10px 10px #f00; } </style> </head> <body> <div class="a"></div> </body> </html>

  • 02

    水平阴影可以理解为偏左右哪个方向，如果加入inset，正数偏左，负数偏右，如果没有inset，正数偏右，负数偏左； 垂直阴影可以理解为偏上下哪个方向，如果加入inset，正数偏上，负数偏下，，如果没有inset，正数偏下，负数偏上； 总之，inset属性让水平、垂直阴影的方向与没有inset时相反。

  • 03

    如果只要实现单侧阴影，就得牺牲掉模糊效果，因为一旦模糊，颜色会扩散，效果会不明显。因为阴影从本质上来说是一个颜色快

  • 04

    0 -10px 0 0   设置上方单边阴影； 10px 0 0 0   设置右侧单边阴影；

赞 (0)

相关推荐

  • 3ds max渲染时灯光的阴影边缘很硬怎么办？

    使用3ds max自带的灯光时,渲染出来的灯光阴影边缘像刀割一样锐利,缺乏真实感,其实只要设置一下阴影参数,问题就不会出现了.这里演示的版本是 VRay 3.2 for 3ds max 2014 英文 ...

  • 3dsmax中英文对照

    3dmax里面的中英文单词-------- Save Selected(保存所选择的对象) Redo(恢复) XRef Objects(外部参考物体) Clone(复制) XRef Scenes(外部 ...

  • 3Dmax命令翻译指南

    FILE(文件) EDIT(编辑)Rest(重置) Undo(撤消)Save Selected(保存所选择的对象) Redo(恢复)XRef Objects(外部参考物体) Clone(复制)XRef ...

  • VBA for Word设置字体的格式

    以下代码为通过VBA代码来设置Word字体的各种格式。 WApp.Selection.Font.NameFarEast = "华文中宋"; WApp.Selection.Font.NameAscii ...

  • AE滤镜有的功能介绍

    本教程给大家翻译了所有AE的滤镜，同时也非常详细的向网的AE FANS们介绍了各种滤镜的作用，希望这个AE滤镜的翻译+解释教程能对大家有所帮助： Invert lnvert称为"反转效果"，用于转化图 ...

  • Word如何用vba设置字体的格式

    以下代码为通过VBA代码来设置Word字体的各种格式. WApp.Selection.Font.NameFarEast = "华文中宋"; WApp.Selection.Font. ...

  • PS+AI教程鼠绘逼真的旋转按钮教程

    PS+AI教程鼠绘逼真的旋转按钮教程

    按着教程做的,觉得挺简单的,虽然不懂英文,但是看图片大概能看懂,或者说,谷歌翻译吧,不过生硬,所以按自己理解重新写了过程.过程可能会很啰嗦,但是这是为了照顾处于基础中的同学,觉得太啰嗦的同学,可以看w ...

  • 如何去除Mac截图的窗口阴影

    使用 Mac 的朋友应该都知道,同时按下 Command + Shift + 3,你就可以对屏幕进行快速截屏,而同时按下 Command + Shift + 4,则可以拖动光标,选择希望截图的区域.但 ...

  • 如何消除OS X窗口截图产生阴影?

    使用Mac的朋友应该都知道,同时按下Command+Shift+3,你就可以对屏幕进行快速截屏,而同时按下Command+Shift+4,则可以拖动光标,选择希望截图的区域.如果你在截图之前按下空格键 ...