CSS-box-shadow特效的记录并使用场景说明

金刚 · 发表于 2020-5-13 21:56:51

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由金刚于 2020-5-13 23:36 编辑

1. 侧边栏中使用，看起来更加立体效果

代码-单项展示box-shadow特效，文件A.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                .container{
                        width: 400px;
                        height: 400px;
                        box-shadow: 2px 6px 9px rgba(0, 0, 0, .2)
                }
        </style>
</head>
<body>
        <div class="container"></div>
</body>
</html>

效果

代码-侧边菜单栏结合展示box-shadow特效，文件B.html

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #888;
    }


    .container {
        overflow: hidden;
        width: 400px;
        height: 400px;
        box-shadow: 2px 6px 9px rgba(0, 0, 0, .2);
    }

    .container .nav-list {
        float: left;
        padding: 0;
    }

    .container .nav-list .list-item {
        color: #888;
    }

    .container .nav-list .list-item .item-href {
        position: relative;
        padding: 0 20px;
        font-size: 20px;
        width: 400px;
        display: block;
        height: 100px;
        line-height: 100px;
        border-bottom: 1px dotted #ddd;
        box-sizing: border-box;
    }

    .container .nav-list .list-item .item-href .item-arrow{
        position: absolute;
        left: 150px;
    }

    .container .nav-list .list-item .item-href:hover {
        background-color: #e62536;
        color: #fff;
    }

    .container .nav-list .list-item:last-child .item-href {
        border-bottom: none;
    }


    </style>
</head>

<body>
    <div class="container">
        <ul class="nav-list">
            <li class="list-item"><a class="item-href" href="#">python<i class="item-arrow">></i></a></li>
            <li class="list-item"><a class="item-href" href="#">flask<i class="item-arrow">></i></a></li>
            <li class="list-item"><a class="item-href" href="#">django<i class="item-arrow">></i></a></li>
            <li class="list-item"><a class="item-href" href="#">tornado<i class="item-arrow">></i></a></li>
        </ul>
    </div>
</body>

</html>

效果展示

Twilight6 · 发表于 2020-5-13 21:58:06

哈哈哈这也不用占吧，这样还容易给刷下去，因为你发的帖子更早，更容易被其他帖子盖上来

金刚 · 发表于 2020-5-14 06:52:49

Twilight6 发表于 2020-5-13 21:58
哈哈哈这也不用占吧，这样还容易给刷下去，因为你发的帖子更早，更容易被其他帖子盖上来

不占位被举报，怎么办？不到30秒就举报，为了奖励，不论青红皂白

Twilight6 · 发表于 2020-5-14 08:05:04

金刚发表于 2020-5-14 06:52
不占位被举报，怎么办？不到30秒就举报，为了奖励，不论青红皂白

不理解？你是怕有什么误解吧

Twilight6 · 发表于 2020-5-14 08:07:09

本帖最后由 Twilight6 于 2020-5-14 08:10 编辑

金刚发表于 2020-5-14 06:52
不占位被举报，怎么办？不到30秒就举报，为了奖励，不论青红皂白

金刚 · 发表于 2020-5-14 10:51:26

Twilight6 发表于 2020-5-14 08:05
不理解？你是怕有什么误解吧

liuzhengyuan · 发表于 2020-5-15 14:12:33

@qiuyouzhi 好像这个也发错板块了

账号		自动登录	找回密码
密码			立即注册

[学习笔记] CSS-box-shadow特效的记录并使用场景说明

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: