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. python相关问题求解决,有偿2. javascript - input输入框触发change事件后,外部元素会被选中3. python - 用__call__ 实现装饰器功能4. javascript - vue2.0中router.repalce跟router.push有什么区别,二者的应用场景是会有怎样的区别?5. javascript - prismplayer播放器全屏问题6. javascript - 在sublime中如何给.vue文件注释?7. python - 请问用cxfreeze打包的可执行程序能反编译出源码么?8. HTML5怎么访问本地文件?9. javascript - 这种上传图片预览怎么做?10. javascript - 把字符串日期转换成一般时间格式后,发现小于10的数字不会自动添加0在前面,如下