Web实现：装饰边框添加阴影

最新推荐文章于 2022-09-11 12:10:33 发布

jasmyn518

最新推荐文章于 2022-09-11 12:10:33 发布

阅读量842

点赞数

分类专栏：笔记 HTML CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/jasmyn518/article/details/122891225

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

装饰元素的边框，给边框加上阴影效果。
HTML部分：

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

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <h3>小米&lt;小爱老师&gt;</h3>
        <p>口袋里的英语外教</p>
        <h4>499元起</h4>
    </div>
</body>

</html>

CSS部分：

* {
    margin: 0;
    padding: 0;
}

.box {
    box-sizing: border-box;
    width: 200px;
    height: 256px;
    background: #ffffff;
    padding-top: 22px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
}

.box::before {
    content: '';
    display: block;
    width: 130px;
    height: 130px;
    margin: 0px auto 16px;
    background: url(./images/phone.jpg) no-repeat center;
    background-size: contain;
}

.box h3 {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
}

.box p {
    margin-top: 4px;
    margin-bottom: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #A8A8A8;
}

.box h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #FD6821;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：装饰边框添加阴影

装饰元素的边框，给边框加上阴影效果。HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习</title> <link rel="stylesheet" href="index.css"></head><body> <div class="box"&
复制链接

扫一扫