CSS：當鼠標懸停在鏈接上時，如何將鏈接的「邊框頂部」製作爲圖像

我想知道是否有方法將邊框頂部和底部邊界更改爲特定邊框使自己。這是一張圖片，我希望它在使用懸停在鏈接上時顯示。CSS：當鼠標懸停在鏈接上時，如何將鏈接的「邊框頂部」製作爲圖像

這可能嗎？或者我必須將我的鏈接製作爲圖像，然後將圖像轉換爲帶有邊框的鏈接的另一個圖像。（這似乎是漫長的路，我希望有一個更簡單的方法）

這是我的代碼。一切正常。我只想用我自己製作的圖像邊框替換實體邊框。

CSS：

.home { 
font: bold 15px; 
    text-align:center; 
height:30px; 
width: 223px; 
    background-color: #d0d1cf; 
    color: #000000; 
    padding: 2px 2px 2px 2px; 
position:absolute; 
left:80px; 
top:200px; 
} 

.home:hover { 
     background-color:#b2b4b0; 
     border-top:solid 1px #ffffff; 
     border-bottom:solid 1px #ffffff; 
     }

HTML：

<div class="home"> 
    <a href="home.html">Home</a> 
</div>

來源

2013-01-01 Taz

有'border-image' ... –

您可以在懸停時使用背景圖像，該背景圖像具有要顯示的兩個邊框。

a { 
border-top:5px; 
border-bottom:5px; 
height:50px; 
} 
a:hover { 
border:none; 
background-image:url(image.jpg); 
height:60px;/*normal height + missing borders*/ 
}

所有你需要做的是在頂部上邊框創建一個圖像，它具有元素的高度+兩個邊沿的高度上底部的底邊框添加。另外，一旦你移除了懸停的邊框，你需要調整元素的高度，所以它不會因爲邊框缺失而改變其高度。

真實高度=高度prop +邊框+填充。

我不會使用邊框圖像，因爲它尚未得到廣泛支持。

來源

2013-01-01 18:23:09 user1721135

嗯非常感謝。我會試試這個！ :) – Taz

div 
{ 
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */ 
-webkit-border-image:url(border.png) 30 30 round; /* Safari */ 
-o-border-image:url(border.png) 30 30 round; /* Opera */ 
border-image:url(border.png) 30 30 round; 
}

請http://www.w3schools.com/cssref/css3_pr_border-image.asp

注意閱讀更多關於邊界形象，邊界圖像不被IE

支持

來源

2013-01-01 18:12:13

我以前在另一篇文章中看到過這個。但我想要所有瀏覽器都能使用的東西。不過謝謝您的回答。 – Taz

CSS：當鼠標懸停在鏈接上時，如何將鏈接的「邊框頂部」製作爲圖像

回答

相關問題