边界图像不改变宽度

有没有什么办法可以让边界图像出现在悬停，以便它不会改变元素的宽度？边界图像不改变宽度

<!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

边界图像不改变宽度

回答

相关问题