是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
结合盒子阴影和轮廓。
李·海耶斯的回答有点小变化 我发现
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
最后的效果非常干净。没有使用边界半径时的大小跳跃
其他回答
我在制作自定义单选按钮,我发现最好的自定义方法是使用伪元素,比如:Codepen
/*CSS is compiled from SCSS*/ .product-colors { margin-bottom: 1em; display: flex; align-items: center; } .product-colors label { position: relative; width: 2.1em; height: 2.1em; margin-right: 0.8em; cursor: pointer; } .product-colors label:before { opacity: 0; width: inherit; height: inherit; padding: 2px; border: 2px solid red; border-radius: 0.2em; content: ""; position: absolute; z-index: 1; background: transparent; top: -4px; left: -4px; } .product-colors input { position: absolute; opacity: 0; width: 0; height: 0; } .product-colors input:checked + label:before, .product-colors input:focus + label:before { opacity: 1; } <div class="product-colors"> <input type="radio" name="cs" id="cs1" value="black"> <label for="cs1" style="background:black"></label> <input type="radio" name="cs" id="cs2" value="green"> <label for="cs2" style="background:green"></label> <input type="radio" name="cs" id="cs3" value="blue"> <label for="cs3" style="background:blue"></label> <input type="radio" name="cs" id="cs4" value="yellow"> <label for="cs4" style="background:yellow"></label> </div>
结合盒子阴影和轮廓。
李·海耶斯的回答有点小变化 我发现
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
最后的效果非常干净。没有使用边界半径时的大小跳跃
你可以用盒子阴影代替这样的轮廓
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
我喜欢这样。
.circle:before {
content: "";
width: 14px;
height: 14px;
border: 3px solid #fff;
background-color: #ced4da;
border-radius: 7px;
display: inline-block;
margin-bottom: -2px;
margin-right: 7px;
box-shadow: 0px 0px 0px 1px #ced4da;
}
它会创建一个灰色的圆,周围有边框,边框也是1px !
尝试使用填充和背景色的边框,然后为轮廓边框:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
对我来说很管用。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?