邊界圖像不改變寬度

有沒有什麼辦法可以讓邊界圖像出現在懸停，以便它不會改變元素的寬度？邊界圖像不改變寬度

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#borderimg1:hover { 
 
box-sizing: border-box; 
 
    border: 30px solid transparent; 
 
    -webkit-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; /* Safari 3.1-5 */ 
 
    -o-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; /* Opera 11-12.1 */ 
 
    border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>The border-image property specifies an image to be used as the border around an element:</p> 
 
<p id="borderimg1">hover me!</p> 
 
</body> 
 
</html>

來源

2017-08-08 Hayk Safaryan

設置邊框的絕對定位僞元素：

#borderimg1 { 
 
    position: relative; 
 
    display: inline-block; /** makes the border appear around the text **/ 
 
} 
 

 
#borderimg1:hover::before { 
 
    display: block; 
 
    position: absolute; 
 
    top: -30px; 
 
    left: -30px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 30px solid transparent; 
 
    -webkit-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; 
 
    /* Safari 3.1-5 */ 
 
    -o-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; 
 
    /* Opera 11-12.1 */ 
 
    border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; 
 
    content: ""; 
 
} 
 

 
body { 
 
    margin: 40px; 
 
}

<p>The border-image property specifies an image to be used as the border around an element:</p> 
 
<p id="borderimg1">hover me!</p>

來源

2017-08-08 14:01:55

邊界圖像不改變寬度

回答

相關問題