問題描述

如果做不出，也可以兩個(gè)元素，最好不要絕對定位

問題解答

首先是不太可能只用一個(gè)元素，因?yàn)橄胍獙?shí)現(xiàn)自定義的 radio 或是 checkbox 時(shí)，都得靠 label 的 for 來實(shí)現(xiàn)，就是隱藏實(shí)際 input ，然後自定義 label 的樣式來實(shí)現(xiàn)，所以至少得兩個(gè)。

<input name='radios' type='radio' /><label for='radio1'></label><input name='radios' type='radio' /><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;}回答2：

如果只是單純的表示這樣一個(gè)圖形的話，單個(gè)p是可以實(shí)現(xiàn)的，即通過背景的徑向漸變

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

上述代碼是運(yùn)行結(jié)果請看http://jsbin.com/vunoraxoko/e...

當(dāng)然，如果你是想表示radio等單選或復(fù)選的話單個(gè)元素恐怕不能滿足你的要求

對于這一點(diǎn)，你可以參考樓上 @Tomoe 的回答

<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預(yù)覽