一些css常用的简单样式描述

最新推荐文章于 2022-06-21 15:23:41 发布

想要飞翔的小猪

最新推荐文章于 2022-06-21 15:23:41 发布

阅读量316

点赞数 1

分类专栏： css css3 文章标签： css 左边竖条实现方法条纹边框

本文链接：https://blog.csdn.net/dwb123456123456/article/details/84890350

版权

css3 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* 左边竖条实现方法 */

    .left_line {
        width: 200px;
        height: 80px;
        background: #eeeeee;
        margin-top: 20px;
    }

    /* 使用border */

    .left_line_one {
        border-left: 4px solid #645264;
    }

    /* 伪元素 */

    .left_line_two {
        position: relative;
    }

    .left_line_two::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 4px;
        height: 80px;
        background: greenyellow;
        line-height: 80px;
    }

    /* box-shadow */

    .left_line_three {
        /* 竖条在div里 */
        box-shadow: inset 4px 0px 0 0 deeppink;
        /* 竖条在div外 */
        /* box-shadow: 4px 0px 0 0 deeppink; */
    }

    /* css3渐变 */

    .left_line_four {
        background-image: linear-gradient(90deg, deeppink 0px, deeppink 4px, transparent 4px);
    }

    /* 条纹边框 */

    .tiaowen_border {
        position: relative;
        width: 180px;
        height: 180px;
        margin-left: 30px;
        margin-top: 20px;
    }

    .tiaowen_border_one {
        background: #9c27b0;
        border: 20px dashed #2196f3;
    }

    .tiaowen_border_one::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
    }

    .tiaowen_border_two {
        background: #fff;
        background-clip: padding-box;
        border: 20px dashed greenyellow;
    }

    .tiaowen_border_two::before {
        content: "";
        position: absolute;
        top: -20px;
        left: -20px;
        bottom: -20px;
        right: -20px;
        background: #996699;
        z-index: -1;
    }

    .tiaowen_border_two img {
        width: 100%;
        height: auto;
    }

    .jianbian {
        width: 400px;
        height: 100px;
        margin-left: 100px;
        margin-bottom: 20px;
    }

    .jianbian_one {
        background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%);
        animation: gradientChange 2s infinite;
    }

    @keyframes gradientChange {
        100% {
            background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%);
        }
    }

    .jianbian_two {
        background: #ffc700;
        animation: gradientChangetwo 3s infinite;
    }

    @keyframes gradientChangetwo {
        50% {
            background: #e91e1e;
        }
        100% {
            background: #ffc700;
        }
    }

    .jianbian_three {
        background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 200% 100%;
        background-position: 0 0;
        animation: bgposition 2s infinite linear alternate;
    }

    @keyframes bgposition {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 100% 0;
        }
    }
</style>

<body>
    <div class="box">
        <!-- 左边竖条实现方法 -->
        <div>
            <div class="left_line_one left_line"></div>
            <div class="left_line_two left_line"></div>
            <div class="left_line_three left_line"></div>
            <div class="left_line_four left_line"></div>
        </div>

        <!-- 其他的还有drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影；outline(不推荐使用)；改变滚动条样式 -->

        <!-- 条纹边框的实现:
            第一种方法：利用border:20px dashed #996699描绘出边框，用伪元素画一个背景 
            第二种方法和第一种方法差不多，不过利用了css3中的background-cli这个属性
            background-cli:规定背景的绘制区域;默认值为no
            border-box	背景被裁剪到边框盒。	测试
            padding-box	背景被裁剪到内边距框。	测试
            content-box	背景被裁剪到内容框。-->
        <div>
            <div class="tiaowen_border_one tiaowen_border"></div>
            <div class="tiaowen_border_two tiaowen_border"></div>
            <div class="tiaowen_border_two tiaowen_border">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3644783065,679437688&fm=173&app=25&f=JPEG?w=640&h=360&s=E55AAE76495050C0924429EF0300A022"
                    alt="">
            </div>
        </div>

        <!-- 背景色渐变动画 -->
        <div>
            <div class="jianbian jianbian_one"></div>
            <div class="jianbian jianbian_two"></div>
            <!-- 总结一下，线性渐变（径向渐变）是不支持 animation 的，单色的 background 是支持的。 -->
            <!-- 背景色渐变动画 -->
            <!-- 通过 background-position 模拟渐变动画 -->
            <div class="jianbian jianbian_three"></div>
            <!-- 通过 background-size 模拟渐变动画 这个跟上面的一样的操作；这两个会用大量的重绘，页面性能消耗大，-->

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

</html>

注释都在代码中

想要飞翔的小猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些css常用的简单样式描述

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫