box-shadow四个边框设置阴影样式

2021-03-22 10:55:29

参考地址 box-shadow四个边框设置阴影样式

其实对于box-shadow,老白我也是一知半解,之前用的时候直接复制已有的,也没有仔细思考过box-shadow的数值分别对应什么,最后导致阴影的边如何自由控制,苦于懒人一个一直没有正式去学习,今天无意中看到以下这篇文章,瞬间清醒有木有,看完整片文章,对于box-shadow阴影四个边的设置完全了如指掌了,再也不怕修改box-shadow了!

对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影。昨天项目中碰到了这个问题,就认真想了一下,在此总结一二。

首先,还是从官方解释说起。

      网上的解释通常都是什么水平阴影长度、垂直阴影长度,略抽象。根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我)

史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第1张

      OK。原点为基点,原点左侧为x轴负方向,值为负,右侧为正;原点下方为y轴正方向,值为正,上方为负。如上图箭头所指。好理解吗?不要嫌我啰嗦,正确理解坐标方向对于理解阴影画法至关重要。

      好了,上代码。官方用语:     box-shadow:1px 2px 3px 4px #ccc inset;

      来分别看一下以上六个值的含义: 1px  从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);

                   2px  从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度);

                   3px  阴影的模糊度,只允许为正值;

                   4px  阴影扩展半径;

                   #ccc  阴影颜色;

                   inset  设置为内阴影(如果不写这个值,默认为外阴影);

      我们再详细点说,所谓内外阴影,其实就是指的是阴影在div的外面一圈还是在div的里面一圈,如下图:

                                     史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第2张外阴影                          史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第3张内阴影

     

      铺垫完毕,说正事——给四条边分别加阴影。

      如果打算添加外部阴影,那么在div内部是不会显示阴影的。看起来好像是废话,来仔细分析一下。

      将div放在直角坐标系中,则div上边与x轴重合,左边与y轴重合,没错吧。所以,对于上面一条边,沿y轴正方向的阴影不会显示,因为沿y轴正方向的长度已经进入到了div内部。同样的,对于左侧边框,沿x轴正方向的长度也进入到了div内部,阴影不会显示。

      对于右侧边框,则沿x轴负方向的长度不显示(不要纠结于原点位置,只考虑坐标方向。可以看做右边与y轴重合,方便理解);对于下方边框(看做下边与x轴重合),沿y轴负方向的长度进入div内部,不显示。

      好吧,我的语言组织能力有待加强。将以下代码配上这一段的文字描述,就不难理解了。

/*说明:(以上部边为例进行说明)

1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;

2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;

3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;

4. 颜色自定;

5. 模糊程度按需要自定;

6. 下、左、右边阴影按规律类推。

*/

 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/

                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/

                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/

                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

效果图:

   史上最简单介绍box-shadow四个边框设置阴影样式的文章 CSS学习 第4张

 

外阴影加好了。倘若是内阴影,可以按这个规律自己推一下。

 

      试验中发现了一个问题:

      对于上下边,相当干净漂亮。但是写左边的阴影时,上边会有一条细细的阴影;写右边阴影时,下边会有一条细细的阴影。不懂为什么。

      期待大神解答。或者先放着吧,等我成为大神了再来解答。


  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同

  • 2017-04-18 17:12:50

    Laravel 读取 config 下的数据

    Laravel的config下一般存放配置信息,可以通过config('key')方法获取指定的数据。 设置值可通过「点」式语法读取,其中包含要访问的文件名以及选项名称。

  • 2017-04-26 16:43:03

    php对象和数组相互转换的方法

    这篇文章主要介绍了php对象和数组相互转换的方法,通过两个自定义函数实现对象与数组的相互转换功能,非常简单实用,需要的朋友可以参考下

  • 2017-04-26 22:59:15

    百度编辑器Ueditor的黑白名单过滤

    黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤,可以通过该配置的修改来达到控制富文本内容的目的

  • 2017-04-26 23:30:58

    PHP中session变量的销毁

    本篇文章主要是对PHP中session变量的销毁进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

  • 2017-05-02 17:51:44

    php生成不重复随机字符串

    使用时间戳作为原始字符串,再随机生成五个字符随机插入任意位置,生成新的字符串,保证不重复