【CSS】请问css 中一个元素能做出这种选中效果么?
如果做不出,也可以两个元素,最好不要绝对定位
回答:
首先是不太可能只用一個元素,因為想要實現自定義的 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>
css">.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;
}
回答:
如果只是单纯的表示这样一个图形的话,单个div
是可以实现的,即通过背景的径向渐变
<div id="a"></div><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 的回答
回答:
<div class="outer"> <div class="inner"></div>
</div>
.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;
}
div.outer:hover div.inner{
display: block;
}
使用 border-radius
和 css 伪类选择器 :hover
预览
以上是 【CSS】请问css 中一个元素能做出这种选中效果么? 的全部内容, 来源链接: utcz.com/a/154389.html