围绕超链接的CSS圈

pla*_*oom 5 html css

可以使用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>
Run Code Online (Sandbox Code Playgroud)

Hau*_*Haf 10

代码的问题在于a元素是内联元素,因此不接受高度.将其更改为块级元素以赋予其指定的高度:

.circle {
    border-radius: 100%;        
    background: green;
    display:inline-block;
    line-height:100px;
}
Run Code Online (Sandbox Code Playgroud)

要使文本显示在中间,请使用line-height而不是height.

工作样本:

http://jsfiddle.net/7qfbopqj/