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