Question

可以使用CSS在超链接周围创建一个大圆圈吗？

我试图实现它，但我的圈子非常小。我想这个圆圈大小类似于超链接大小。如果我将超链接放在div中，它就不会集中在圈内。

以下是我正在做的事情：

<html>
<head>
    <style>
    .circle {
        border-radius: 1000%;
        width: 40px;
        height: 40px; 
        background: green;
    }
    </style>
</head>
<body>
    <a href="#" class="circle">Test test test test</a>
</body>
</html>

Answer 1

您的代码存在的问题是a元素是内联元素，因此不接受高度。将其更改为块级元素以赋予其指定的高度：

.circle {
    border-radius: 100%;        
    background: green;
    display:inline-block;
    line-height:100px;
}

要让文字显示在中间，请使用line-height代替height。

工作样本：

http://jsfiddle.net/7qfbopqj/

Answer 2

您可以在链接周围添加div并将链接置于其中心。

<div class="circle">
<center><a href="[link address]">[link name]</a></center>
</div>


.circle {
border: 2px solid red;
border-radius: 25px;
width: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

http://jsfiddle.net/yg25us3k/

Answer 3

这是可能的，但你必须设置框大小以匹配文本长度，试试这个：

.circle {
    border-radius: 1000%;
    width: 40px;
    height: 40px; 
    background: green;
    display:inline-block;
    line-height:40px;
    vertical-align:center;
    text-align:center;
    color:#ffffff;
}


<body>
    <a href="#" class="circle">Test </a>
</body>

试试jsfiddle：http://jsfiddle.net/prt4y7b2/

Answer 4

使用padding，您可以使圆圈比链接

更大

#circle {
    border-radius: 1000%;
    padding:50px;/* this instead of a set width and height just change this to change how much bigger the circle is than the link*/
    background:black;
    text-align:center;
    vertical-align:center;
}

围绕超链接的CSS圈

4 个答案: