如何用css画出一个圆圈，里面有个对号？

html-css012

如何用css画出一个圆圈，里面有个对号？,第1张

.box {

width: 150px

height: 150px

margin: 100px auto

border-radius : 5e%

border: 5px solid #o0000e

display: flex

justify-content: center

align-items : center

}

.box: : before {

content: ""

display: block

width: 88px

height: 5epx

border: 20px solid #ee000e

border-right: none

border-top: none

transform: rotate(-45deg) translate(7px，-10px)

}

这个得用Html做的

<form action="" method="get">

您喜欢的水果？<br />

<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>

<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>

<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>

<label><input name="Fruit" type="checkbox" value="3" />梨 </label>

</form>

1.我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具；

2.打开的调试工具如下图所示：

3.我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素；

4.看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了；

5.我去掉一些样式之后，就出现了下面的效果，看截图；