box-shade用法

The CrazyMan

已于 2023-02-01 18:14:10 修改

阅读量342

点赞数 1

分类专栏：前端web 文章标签：学习 css 前端

于 2022-12-16 16:26:40 首次发布

本文链接：https://blog.csdn.net/qq_42897323/article/details/128344033

版权

前端web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

记录box-shade属性的知识和自定义按钮知识

文章目录

一、box-shade
二、实现图片的内阴影
三、自定义按钮

正文内容：

一、box-shade

box-shade:给对象实现图层阴影效果
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开

取值：
box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小；
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数；
以上内容引用自博客

二、实现图片的内阴影

给图片添加内阴影一共分为三步

将img标签放到div标签里面
为div标签的父元素div设置box-shadow属性
为img标签设置position: relative;z-index: -1;属性，先设置相对定位，然后将阴影显示在最顶层

范例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div.first {
            display: inline-block;
            box-shadow:inset 0 0 20px  red;
        }

        div.first div.first_context img {
            position: relative;
            z-index: -1;
        }
    </style>
    <title>box-shade学习</title>
</head>

<body>

    <div class="first">
        <div class="first_context">
            <img src="https://zl.crazymen.cn/upload/boy.jpeg"
                alt="图片">
        </div>
    </div>

    <div class="second">
        <div class="second_context">

        </div>
    </div>
</body>

</html>

效果图如下所示：
在这里插入图片描述
以上代码可以使用伪元素:before实现，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div.first {
            position: relative;
            display: inline-block;
        }

        div.first::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 20px red;
        }
    </style>
    <title>box-shade学习</title>
</head>

<body>

    <div class="first">
        <div class="first_context">
            <img src="https://zl.crazymen.cn/upload/boy.jpeg" alt="图片">
        </div>
    </div>

    <div class="second">
        <div class="second_context">

        </div>
    </div>
</body>

</html>

三、自定义按钮

按钮的制作，主要包括按钮的大小定制，背景颜色定制，字体大小定制等；
范例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        div.main input.btn1,div.main button.btn2{
            width: 80px;
            height: 35px;
            background-color: beige;
            border: 0;
            border-radius: 5px;
        }

        div.main div.btn3{
            display: inline-block;
            width: 80px;
            height: 35px;
            line-height: 35px;
            background-color: beige;
            border: 0;
            text-align: center;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
    <title>button学习</title>
</head>
<body>
    <div class="main">
        <input class="btn1" type="button" value="按钮1">
        <button class="btn2">按钮2</button>
        <div class="btn3">按钮3</div>
    </div>
</body>
</html>