html - 請問css 中一個元素能做出這種選中效果么?
問題描述
如果做不出,也可以兩個元素,最好不要絕對定位
問題解答
回答1:首先是不太可能只用一個元素,因為想要實現自定義的 radio 或是 checkbox 時,都得靠 label 的 for 來實現,就是隱藏實際 input ,然後自定義 label 的樣式來實現,所以至少得兩個。
實現<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:
如果只是單純的表示這樣一個圖形的話,單個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 的回答
回答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預覽
相關文章:
1. mysql 查詢身份證號字段值有效的數據2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. 視頻文件不能播放,怎么辦?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口,操作之后關閉,主窗口會得到相應的響應,例如網站的某些登錄界面,django后臺的管理等,這是怎么實現的呢?9. javascript - ios返回不執行js怎么解決?10. android - 分享到微信,如何快速轉換成字節數組
