圍繞超鏈接的CSS圈

是否可以使用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>

來源

2014-10-02 placplacboom

與您的代碼的問題是，a元素是內嵌元素，因此不接受任何高度。將其更改爲一個塊級元素，給它指定的高度：

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

要將文字出現在中間，用line-height代替height。

工作樣本：

http://jsfiddle.net/7qfbopqj/

來源

2014-10-02 22:01:38 HaukurHaf

完美溶膠。 +1 – 2014-10-02 22:03:51

'border-radius'不適用於較舊的瀏覽器。 – PHPglue 2014-10-02 22:04:56

我們不能總是迎合舊版瀏覽器。恕我直言，舊的瀏覽器錯過了諸如圓角等類似外觀的東西，這很好。 – HaukurHaf 2014-10-02 22:06:07

你可以把一個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/

來源

2014-10-02 22:01:59 adanot

中心標記？我們在20世紀90年代在哪裏？ ;-) – HaukurHaf 2014-10-02 22:02:40

哈哈哈geez好！ – adanot 2014-10-02 22:03:37

這是可能的，但你必須設置框的大小，以匹配文本長度，試試這個：

.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/

來源

2014-10-02 22:03:22 ClemSndr

使用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; 
}

來源

2014-10-02 22:16:36 Parody

圍繞超鏈接的CSS圈

回答

相關問題