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

Question

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

Answer 1

首先是不太可能只用一個元素，因為想要實現自定義的 radio 或是 checkbox 時，都得靠 label 的 for 來實現，就是隱藏實際 input ，然後自定義 label 的樣式來實現，所以至少得兩個。

實現

<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

如果只是单纯的表示这样一个图形的话，单个p是可以实现的，即通过背景的径向渐变

<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>

上述代码是运行结果请看
http://jsbin.com/vunoraxoko/e...

当然，如果你是想表示radio等单选或复选的话
单个元素恐怕不能满足你的要求

对于这一点，你可以参考楼上 @Tomoe 的回答

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;
}

使用 border-radius 和 css 伪类选择器 :hover
预览