css-边界上有边的圆圈 [英] css - circle with margin on border
本文介绍了css-边界上有边的圆圈的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个具有边距的轮廓的圆。
一切似乎正常,除了我似乎无法得到那么多 px
保证金。
有什么建议吗?
I am trying to create a circle with an outline that has margin.
Everything seems to work except i cant seem to get that few px
of margin in there.
Any suggestions please?
.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;}
这是我的小提琴: http://jsfiddle.net/nalagg/K6pdr/
推荐答案
我想这样对待它:
外部边界-使用盒子阴影
内部边距-使用白色边框
内部区域-使用背景色
Outer "border" - use a box shadow
Inner "margin" - use a white border
Inner area - use background color
一起就能得到:
.circle {
background-color: #F80;
border: 3px solid #FFF;
border-radius: 18px;
box-shadow: 0 0 2px #888;
height: 30px;
width: 30px;
}
<div class="circle"></div>
您可以通过将box-shadow上的blur-radius设置为0来使外部边框更加清晰。
You can make the outer border more distinct by setting blur-radius to 0 on box-shadow.
.circle {
background-color: #F80;
border: 3px solid #FFF;
border-radius: 18px;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 0 0 2px #888;
height: 30px;
width: 30px;
}
<div class="circle"></div>
作为替代,您可以使用第二个元素:
As an alternative, you could use a second element:
.circle {
border: 1px solid #CCC;
border-radius: 19px;
display: inline-block;
}
.inner {
background-color: #F80;
border-radius: 15px;
margin: 3px;
height: 30px;
width: 30px;
}
<div class="circle">
<div class="inner"></div>
</div>
这篇关于css-边界上有边的圆圈的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文