【css】box-shadow

最新推荐文章于 2024-04-02 08:40:43 发布

richest_qi

最新推荐文章于 2024-04-02 08:40:43 发布

阅读量316

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107867829

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

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

在这里插入图片描述

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】box-shadow

<body> <div class="box aligncenter"></div></body>.aligncenter{ margin:100px auto 0 auto;}.box{ margin: 100px auto 0 auto; width:100px; height:100px; box-shadow:0 0 0 5px lightskyblue; /* box-shadow: 0 0
复制链接

扫一扫

专栏目录