美文网首页
CSS设置div四个角的样式

CSS设置div四个角的样式

作者: 随行者pgl | 来源:发表于2020-04-03 11:30 被阅读0次
    图样.png

    话不多说,直接上代码

        <div class="angle-border left-top-border"></div>
            <div class="angle-border right-top-border"></div>
            <div class="angle-border left-bottom-border"></div>
            <div class="angle-border right-bottom-border"></div>
    </div>
    
      .plate-rank-content{
        width:500px;
        height: 268px;
        box-shadow:inset 0px  0px 30px 0px rgba(32,116,247,0.3);
        border:1px solid rgba(255,255,255,0.4);
        position:relative;
      }
      .angle-border{
        position: absolute;
        width: 12px;
        height: 12px;
      }
      .left-top-border{
        top: 0;
        left: 0;
        border-left: 2px solid #FFFFFF;
        border-top: 2px solid #FFFFFF;
      }
      .right-top-border{
        top: 0;
        right: -2px;
        border-right: 2px solid #FFFFFF;
        border-top: 2px solid #FFFFFF;
      }
      .left-bottom-border{
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #FFFFFF;
        border-left: 2px solid #FFFFFF;
      }
      .right-bottom-border{
        bottom: 0;
        right: -2px;
        border-right: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
      }
    

    相关文章

      网友评论

          本文标题:CSS设置div四个角的样式

          本文链接:https://www.haomeiwen.com/subject/fzfhphtx.html