【css】box-shadow_综合

文章目录

- - - box-shadow
    - - 阴影半径
      - x/y偏移
      - 扩张半径
      - 扩张半径为正值
        
        扩张半径为负值
      - inset
      - 实例：凹凸效果之骰子
    - 单侧投影
    - 相邻两侧投影
    - 相对两侧投影

box-shadow

box-shadow:x偏移 y偏移阴影半径扩张半径阴影颜色

<body><div class="box aligncenter"></div>
</body>

    .aligncenter{
    margin:100px auto 0 auto;}

阴影半径

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 5px lightskyblue;
}

在这里插入图片描述

x/y偏移

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 5px lightskyblue;box-shadow:3px 3px 5px lightskyblue;box-shadow:5px 5px 5px lightskyblue;box-shadow:10px 10px 5px lightskyblue;box-shadow:50px 50px 5px lightskyblue;box-shadow:100px 100px 5px lightskyblue;
}

在这里插入图片描述

扩张半径

扩张半径类似border，但又不同于border，因为box-shadow不占据流空间。
扩展半径为正值时，阴影面积扩大；为负值时，阴影面积缩小。

扩张半径为正值

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 0 5px lightskyblue;box-shadow:0 0 0 5px lightskyblue,0 0 0 10px lightseagreen;
}

在这里插入图片描述

扩张半径为负值

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:10px 10px 5px lightskyblue;box-shadow:10px 10px 5px -5px lightskyblue;box-shadow:10px 10px 5px -10px lightskyblue;
}

在这里插入图片描述

inset

如果没有指定inset，则默认阴影在边框外；
如果指定了inset，则阴影在边框内，且背景之上，内容之下。
在这里插入图片描述

实例：凹凸效果之骰子

<body><div class="box"><div class="item"></div></div>
</body>

body{
    background-color:#333;
}
.box{
    background-color:#e7e7e7;margin:16px;padding:4px;width:104px;height: 104px;border-radius: 10%;box-shadow:inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
}
.item{
    width:24px;height: 24px;border-radius: 50%;margin:4px;background-color: #333;box-shadow: inset 0 3px #111,inset 0 -3px #555;
}

在这里插入图片描述

单侧投影

扩张半径为负值，且扩张半径等于阴影半径，此时
如果x、y方向均无偏移，则阴影不可见；
如果仅x方向有正向偏移，则右侧有阴影；
如果仅x方向有负向偏移，则左侧有阴影；
如果仅y方向有正向偏移，则底部有阴影；
如果仅y方向有负向偏移，则顶部有阴影。

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 5px -5px lightskyblue;box-shadow:5px 0 5px -5px lightskyblue;box-shadow:-5px 0 5px -5px lightskyblue;box-shadow:0 5px 5px -5px lightskyblue;box-shadow:0 -5px 5px -5px lightskyblue;
}

在这里插入图片描述

相邻两侧投影

第一种思路
扩张半径为负值，且扩张半径等于阴影半径，此时
如果x、y方向均无偏移，则阴影不可见；
如果x、y方向都有正向偏移，则右下角有阴影，即右侧、底部有阴影；
如果x、y方向都有负向偏移，则左上角有阴影，即左侧、顶部有阴影。

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 5px -5px lightskyblue;box-shadow:5px 5px 5px -5px lightskyblue;box-shadow:-5px -5px 5px -5px lightskyblue;
}

在这里插入图片描述

第二种思路
扩张半径为负值，且扩张半径等于阴影半径的一半，此时
如果x、y方向均无偏移，则四侧都有阴影，且阴影宽度等于阴影半径的一半；
如果x、y方向都有正向偏移，则右下角有阴影，即右侧、底部有阴影，且阴影宽度等于阴影半径；
如果x、y方向都有负向偏移，则左上角有阴影，即左侧、顶部有阴影，且阴影宽度等于阴影半径。

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 10px -5px lightskyblue;box-shadow:5px 5px 10px -5px lightskyblue;box-shadow:-5px -5px 10px -5px lightskyblue;
}

在这里插入图片描述

相对两侧投影

.box{
    width:100px;height:100px;background-color:lightyellow;box-shadow:0 0 5px -5px lightskyblue;box-shadow:5px 0 5px -5px lightskyblue,-5px 0 5px -5px lightskyblue;box-shadow:0 5px 5px -5px lightskyblue,0 -5px 5px -5px lightskyblue;
}

在这里插入图片描述