Box-shadow 属性的使用

最新推荐文章于 2024-05-28 17:33:16 发布

-cc- Lynn

最新推荐文章于 2024-05-28 17:33:16 发布

阅读量226

点赞数

分类专栏： web 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Lynntureture/article/details/125995931

版权

web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

语法

box-shadow:

offset-x offset-y blur spread color position;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色投影方式 }

1.offset-x

第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

<!DOCTYPE html>
<html>
<head>
    <META CHARSET="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 300px;
            background-color: #02004b;
        }
        .left {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5)
        }
        .right {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5)
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>

2. offset-y

第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。

<!DOCTYPE html>
<html>
<head>
    <META CHARSET="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 300px;
            background-color: #02004b;
        }
        .left {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5)
        }
        .right {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5)
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>

3.blur

第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。

<!DOCTYPE html>
<html>
<head>
    <META CHARSET="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 300px;
            background-color: #02004b;
        }
        .left {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5)
        }
        .right {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5)
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>

4.spread

第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。

<!DOCTYPE html>
<html>
<head>
    <META CHARSET="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 300px;
            background-color: #02004b;
        }
        .left {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5)
        }

        .right {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5)
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>

5.color

color 部分的值是指阴影的颜色。它可以是任意的颜色单元

<!DOCTYPE html>
<html>
<head>
    <META CHARSET="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 300px;
            background-color: #02004b;
        }
        .left {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 20px 10px #67b3dd
        }

        .right {
            margin: 30px;
            width: 100px;
            height: 60px;
            background-color: goldenrod;
            box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5)
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>

-cc- Lynn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Box-shadow 属性的使用

第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为0意味着该阴影是固态而锋利的，完全完全没有模糊效果。第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。第一个长度值指明了阴影水平方向的偏移，即阴影在x轴的位置。值为负数时，阴影在元素的左侧。第二个长度值指明了阴影竖直方向的偏移，即阴影在y轴的位置。值为负数时，阴影在元素的上方。color部分的值是指阴影的颜色。...
复制链接

扫一扫