美文网首页
css伪元素实现

css伪元素实现

作者: zy懒人漫游 | 来源:发表于2018-08-15 09:49 被阅读0次
    .box{
      width: 150px;
      height: 150px;
      background: #f39700;;
      border-radius: 50%;
      text-align: center;
      line-height: 150px;
      position: relative;
      font-size: 40px; 
      margin: 50px auto;
      color:#fff;
      font-style: italic; //字体倾斜
    }
    
    .box::before{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: '';
      width: 200px;
      height:  200px;
      background-color: #fff;
      border-radius:50%;
      z-index: -1;
      border: 2px solid #f39700;;
    }
    
    
    image.png

    相关文章

      网友评论

          本文标题:css伪元素实现

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