Question

我试图使用cirlce作为其中一个单选按钮，但是在使用css3时我会在边框周围变得模糊。

这是代码

div {
    height: 18px;
    width: 18px;
    overflow: hidden;
    border-radius: 50%;
   position: relative;       
    border-radius: 100px;
    box-shadow: 10px 10px 10px -26px  inset rgba(0, 0, 0, 1);
    border:1px solid red;      

    }

任何想法如何避免？

Answer 1

默认情况下，收音机输入有一个边距，而父div的边框只包裹整个div，所以边距使它看起来很奇怪。

我将单选按钮的边距设置为3px以使其适合中心。在我看来，任何模糊似乎都是固定的。

<div class="rad">
    <input type="radio" /> Radio Button
</div>

.rad {
    height: 18px;
    width: 18px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    box-shadow: 10px 10px 10px -26px  inset rgba(0, 0, 0, 1);
    border:1px solid red;      
    overflow:hidden;
    }
input {
    margin: 3px !important;
}

https://jsfiddle.net/bp6fLo7c/1/

Answer 2

您可以设计自己的单选按钮。

1）禁用默认外观：

-webkit-appearance: none;
appearance: none;

2）根据需要设计样式。

3）样式＆＃34;检查＆＃34;州：

input[type="radio"]:checked {
    background-color: red;
}

演示： https://jsfiddle.net/Paf_Sebastien/fjoyajxn/

Css3圈子给人的模糊

2 个答案: