CSS Box-Shadow Bottom Only

2025年1月31日 | 阅读 6 分钟

在本文中，我们将了解 CSS box shadow 仅底部。

CSS Box-shadow

“box-shadow” 是用于为 HTML 元素添加阴影的 CSS 属性。

语法

box-shadow 属性接受的值描述如下：

H-shadow（水平阴影）： 它代表框阴影的水平偏移。它可以是正值或负值。如果为正值，则阴影向右创建；如果为负值，则阴影向左创建。
V-shadow（垂直阴影）： 它代表框阴影的垂直偏移。它可以是正值或负值。如果为正值，则阴影向下创建；如果为负值，则阴影向上创建。
Blur（模糊）： 它代表框阴影的模糊半径。值越大，模糊阴影越大；值越小，模糊阴影越小。
Spread（扩散）： 它代表框阴影的扩散半径。它可以是正值或负值。如果为正值，则框阴影会扩展；如果为负值，则框阴影会收缩。
Color（颜色）： 它代表框阴影的颜色。
Inset（内嵌）： 它使框阴影出现在 HTML 元素的内部。

CSS Box-Shadow 仅底部插图

让我们通过插图来理解 CSS box shadow 仅底部。

插图 1

我们将使用 CSS box-shadow 属性在 <div> 元素底部创建阴影。我们将在元素底部外部和内部创建阴影。我们将为 CSS box-shadow 属性提供 h-shadow、v-shadow、blur、spread 和 color 值，以在元素底部外部创建阴影。

我们将为 CSS box-shadow 属性提供 inset 值以及 h-shadow、v-shadow、blur、spread 和 color 值，以在元素底部内侧创建阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS box-shadow bottom only property</title>
    <style>
        div {
            font-family: 'Courier New', Courier, monospace;
            font-size: 25px;
            text-align: center;
            color: rgb(70, 8, 8);
            padding: 24px;
            font-weight: bold;
        }
        .box-shadow1 { 
            width: 500px;
            height: 150px;
            background-color: rgb(243, 167, 154);
            box-shadow: 0px 10px 8px -6px red;
        } 
        .box-shadow2 { 
            width: 500px;
            height: 150px;
            background-color: rgb(243, 167, 154);
            box-shadow:  0 -15px 10px -10px red inset;
        } 
    </style>
</head>
<body>
    <div class="box-shadow1">
        <p>Box-1 <br> CSS box-shadow bottom only:
            shadow is outside the element.
        </p>
    </div> <br> <br>
    <div class="box-shadow2">
        <p>Box-2 <br> CSS box-shadow bottom only:
            shadow is inside the element.
        </p>
    </div>
</body>
</html>

输出

这是输出，我们可以在其中看到 HTML 元素底部的阴影。我们可以看到框 1 外侧的阴影和框 2 内侧的阴影。

插图 2

我们将创建一个查询表单和一个按钮，并使用 CSS box-shadow 属性在按钮底部添加阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS box-shadow at the bottom of the button in the form</title>
    <style>
        form {
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            color: rgb(70, 8, 8);
            padding: 24px;
            width: 500px;
            font-weight: bold;
            border: 1px solid teal;
        }
        .btn { 
            width: 75px;
            height: 32px;
            background-color: rgb(160, 243, 185);
            border: 1px solid teal;
            box-shadow: 0px 15px 15px -9px teal;
        } 
    </style>
</head>
<body>
    <form>
        <label for="query">Enter your query:</label> <br> <br>
        <input type="text" value="Type your query"> <br> <br>
        <button class="btn">Send</button>
    </form>
</body>
</html>

输出

这是输出，我们可以在其中看到表单内按钮底部的阴影。

插图 3

我们将创建一个表单，并使用 CSS box-shadow 属性在<input> 元素底部添加阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding a shadow at the bottom of the &lt;input&gt; element in the HTML form</title>
    <style>
        div {
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            color: rgb(9, 17, 104);
            padding: 24px;
            width: 400px;
            height: 550px;
            font-size: 18px;
            font-weight: bold;
            background-color: rgb(199, 191, 191);
            border: 1px solid rgb(9, 17, 104);
        }
        input[type="submit"] {
            width: 75px;
            height: 30px;
            border-radius: 6px;
            background-color: rgb(153, 132, 132);
            border: 1px solid rgb(84, 61, 61);
        }
        input[type="text"] { 
            width: 200px;
            height: 21px;
            box-shadow: 0px 8px 12px -10px rgb(62, 37, 37);
        }
    </style>
</head>
<body>
    <h3>Student Registration Form</h3>
    <div>
        <form>
            <label for="first-name">First Name:</label> <br> <br>
            <input type="text" value="Type your first name"> <br> <br>
            <label for="last-name">Last Name:</label> <br> <br>
            <input type="text" value="Type your last name"> <br> <br>
            <label for="name">Gender:</label> <br> <br>
            <input type="radio" name="female" value="female">
            <label for="female">Female</label> <br> <br>
            <input type="radio" name="male" value="male">
            <label for="male">Male</label> <br> <br>
            <input type="radio" name="others" value="others">
            <label for="others">Others</label>  <br> <br>
            <label for="age">Age:</label> <br> <br>
            <input type="text" value="Type your age"> <br> <br>
            <label for="course">Course:</label> <br> <br>
            <input type="text" name="course" id="course"> <br> <br>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

输出

这是输出，我们可以在其中看到表单内按钮底部的阴影。

插图 4

我们将使用 CSS box-shadow 属性为元素创建动画阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Animated box shadow at the bottom of the element (inside and outside)</title>
    <style>
        div {
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            color: red;
            padding: 18px;
            width: 500px;
            height: 75px;
            font-weight: bold;
            border: 1px solid yellowgreen;
            text-align: center;
            background-color: yellow;
        } 
        .box-shadow1 {
            box-shadow: 0px 10px 10px -6px red;
            animation: animate-box-shadow1 1s infinite alternate;
        }
        @keyframes animate-box-shadow1 {
            to {
                box-shadow: 0px 8px 20px -10px rgb(151, 224, 7);
            }
        }
        .box-shadow2 {
            box-shadow: 0px -10px 10px -6px red inset;
            animation: animate-box-shadow2 1s infinite alternate;
        }
        @keyframes animate-box-shadow2 {
            to {
                box-shadow: 0px -8px 20px -10px inset rgb(151, 224, 7);
            }
        }
    </style>
</head>
<body>
    <div class="box-shadow1">animated shadow at the bottom only (shadow outside the element)</div> <br> <br>
    <div class="box-shadow2">animated box-shadow at the bottom only (shadow inside the element)</div>
</body>
</html>

输出

这是输出，我们可以在其中看到 HTML 元素外侧和内侧底部都有动画阴影。

插图 5

在此演示中，我们将使用 CSS box-shadow 属性为卡片底部添加双重阴影。我们将在 box-shadow 属性中写入两次值以创建双重阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Double shadow at the bottom of the card</title>
    <style>
        .card {
            font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
            font-size: 36px;
            background-color: rgb(180, 233, 233);
            color: rgb(2, 2, 77);
            padding: 30px;
            width: 250px;
            height: 350px;
            text-align: center;
            font-weight: bold;
            border: 1px solid rgb(176, 176, 253);
            box-shadow: 0px 15px 10px -15px rgb(2, 2, 77), 0px 15px 10px -15px rgb(2, 2, 77);
        }
    </style>
</head>
<body>
    <div class="card">CARD</div>
</body>
</html>

输出

这是输出，我们可以在其中看到卡片底部有双重阴影。

插图 6

我们将使用 CSS box-shadow 属性创建底部带有阴影的导航栏。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding a shadow at the bottom of the navigation bar</title>
    <style>
        body {
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
        }
        nav{
            padding: 10px;
            background-color: darkgrey;
            display: flex;
            font-size: 20px;
            color: black;
            font-weight: bold;
        }
        .box-shadow {
            box-shadow: 0px 10px 10px -6px black;
        }
    </style>
</head>
<body>
    <nav class="box-shadow">
        <ul>
            <li href="#">Home</li>
            <li href="#">About</li>
            <li href="#">Services</li>
            <li href="#">Contact</li>
        </ul>
    </nav>
</body>
</html>

输出

这是输出，我们可以在其中看到底部带有阴影的导航栏。

插图 7

在此演示中，我们将使用 CSS box-shadow 属性在图片底部添加阴影。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding a shadow at the bottom of the image</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
        }
        image {
            width: 250px;
            height: 200px;
        }
        .box-shadow {
            box-shadow: 0px 18px 10px -6px rgb(2, 50, 2);
        }
    </style>
</head>
<body>
    <img src="flower.png" alt="Flower" class="box-shadow">
</body>
</html>

输出

这是输出，我们可以在其中看到图片底部的阴影。

浏览器支持

以下是支持 CSS box-shadow 属性的浏览器

谷歌浏览器
Safari
火狐
Opera
Microsoft Edge

结论

本文解释了CSS box shadow 仅底部。它展示了如何使用 CSS box-shadow 属性在 HTML 元素底部添加阴影。

下一主题CSS Checkbox Size

← prev next →

CSS Box-Shadow Bottom Only

CSS Box-shadow

语法

CSS Box-Shadow 仅底部插图

插图 1

插图 2

插图 3

插图 4

插图 5

插图 6

插图 7

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Box-Shadow Bottom Only

CSS Box-shadow

语法

CSS Box-Shadow 仅底部插图

插图 1

插图 2

插图 3

插图 4

插图 5

插图 6

插图 7

浏览器支持

结论

相关帖子

CSS Spacing

Class vs Id

CSS 中的图片文字叠加

CSS Curved Border

CSS Transition Timing Function

CSS Profile Login

CSS Layers

CSS 100 Height

CSS on Hover Image Zoom

Responsive Image Gallery HTML CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器