【CSS】请问css 中一个元素能做出这种选中效果么?

如果做不出,也可以两个元素,最好不要绝对定位图片描述

回答:

首先是不太可能只用一個元素,因為想要實現自定義的 radio 或是 checkbox 時,都得靠 labelfor 來實現,就是隱藏實際 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

回到顶部