美文网首页
css实现画圆

css实现画圆

作者: 诺喵 | 来源:发表于2022-08-14 19:19 被阅读0次

    html代码

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

    1.首先,我们创建一个div.

    css代码

    
    <style>
    
          div {
    
            margin: 100px auto;
    
            width: 200px;
    
            height: 200px;
    
            border: 2px solid pink;
    
          }
    
        </style>
    
    

    2.然后写下以上样式,设置宽高一致,加上2像素的实线、粉色边框,随个人喜好更改.不过我们现在得到的是一个粉色的正方形框框.

    margin: 100px auto; 是指外边距向上向下距离100像素,左右均分.

    加入样式

    
    border-radius: 50%;
    
    

    边框圆角:50%;

    3.加上之后,我们就得到了一个粉色的圆啦!!

    好了,今天分享到这,谢谢观看、查阅。

    相关文章

      网友评论

          本文标题:css实现画圆

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