css实现画圆

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样式规则overflow 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,021评论 0 1
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,332评论 2 66
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,616评论 0 6
  • 一,css常见问题: 一、margin问题 上下margin重叠问题,即给相邻的两个div设置margin-bot...
    _往后_阅读 1,648评论 0 2
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 282评论 0 1