【css】box-shadow

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;
}

在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页