html5 - 有没有纯CSS伪元素写的效果？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 有没有纯CSS伪元素写的效果？

天蓬老师 2017-04-17 11:56:56

[HTML讨论组]

460

有没有纯CSS伪元素写的效果？之前在网上看到用纯CSS写成的样式，忘记收藏了，现在再也找不到了

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

怪我咯2017-04-17 11:58:56 2楼

刚受这个帖子启发画了个彩虹：
CSS

    .box {
        position: relative;
        width: 400px;
        height: 160px;
        overflow: hidden;
    }
    .box::before {
        display: block;
        width: 360px;
        height: 300px;
        margin: 60px auto 0;
        border-radius: 100%;
        border: solid 1px white;
        box-shadow: 0 -5px 5px green, 0 -10px 10px yellow, 0 -15px 15px red, 0 -20px 20px yellow, 0 -25px 20px blue;
        content: " ";
    }
    .box::after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 400px;
        height: 160px;
        background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
        background-image: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
        background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='#ffffff', GradientType=0);
        content: " ";
    }

html