有没有纯CSS伪元素写的效果?

摩天轮下的肖邦曲
  • 505

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

回复
阅读 2.2k
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

<div class="box"></div>

效果
图片描述

刚在慕课网上学了用伪元素写的box—shadow效果,可以去慕课网搜一下box–shadow那个视频

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏