html - 灵活的边界半径

标签 html css

enter image description here我有一些 anchor 标签。我正在对它们应用边界半径,以便它们看起来呈圆形 (CIRCLE)。它必须灵活适应其文本宽度。我正在尝试但不知道该怎么做。 FIDDLE

我怎样才能做到这一点?请提出任何建议。

<a href="http://google.com">abc</a>
<a href="http://en.wikipedia.org/">abcdefgh</a>

CSS:

a{

    border:1px solid black;
    padding:10px;
    -webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

最佳答案

您可以用百分比给出半径。

CSS:

a{

    border:1px solid black;
    padding:10px;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;
}

这里是 Updated fiddle

从边界半径来看,不可能在 anchor 周围得到相同的圆圈,因为它取决于 anchor 文本大小。如果它不同,它也反射(reflect)圆圈。

更新:

您可以使用 div 来完成此操作,方法是给出宽度和高度:DEMO

Another Example

关于html - 灵活的边界半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23196898/

相关文章:

javascript - 如何在kendo-ui中默认显示占位符

html - 非全 Angular 内的全 Angular div

javascript - 使元素填充其容器的宽度并且没有边距将其推出该容器?

javascript - 使用 Javascript 检索 AppScript 的 URL

html - 某些移动设备上的封面背景图像不正确

javascript - Jquery 类检查和更改

javascript - 在宽度变化时保持可滚动内容的位置

html - CSS3 动画显示在 2 个属性上,而只选择了 1 个

html - 无法在 div 中对齐内容

javascript - 使用下拉菜单添加/删除搜索框