html - 请问css 中一个元素能做出这种选中效果么？

Question

如果做不出，也可以两个元素，最好不要绝对定位

Answer 1

First of all, it is impossible to use only one element, because when you want to implement a customized radio or checkbox, you have to rely on the label of for to achieve it, which is to hide the actual input. Then customize the style of label to implement it, so there are at least two.

Achievement

<input name="radios" class="circle-radio" type="radio" id="radio1"/><label for="radio1"></label>

<input name="radios" class="circle-radio" type="radio" id="radio2"/><label for="radio2"></label>

.circle-radio {
  visibility: hidden;
}

.circle-radio + label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #00AAFF;
}

.circle-radio:checked + label {
  display: block;
  background: #00AAFF;
  box-shadow: inset 0px 0px 0px 6px white;
}

Answer 2

If you simply represent such a graphic, a single p can be achieved, that is, through the radial gradient of the background

<p id="a"></p>
<style>
    #a{
        width:100px;
        height:100px;
        border-radius:50%;
        background: -webkit-radial-gradient( #0af 0%,#0af 25%,transparent 26%,transparent 60%, #0af 61%, #0af 100%);
    }
</style>

The above code is the running result, please see
http://jsbin.com/vunoraxoko/e...

Of course, if you want to express radio and other radio or check selections
I am afraid that a single element cannot meet your requirements

For this point, you can refer to @Tomoe’s answer above

Answer 3

    <p class="outer">
        <p class="inner"></p>
    </p>

.outer {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 3px solid blue;
    border-radius: 50px;
}
.inner {
    display: none;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    margin-top: 25%;
    border-radius: 25px;
    background-color: blue;
}
p.outer:hover p.inner{
    display: block;
}

Use border-radius and css pseudo-class selector :hover
Preview