有什么方法可以让边框图像在悬停时显示，这样它就不会改变元素的宽度？
<!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>在绝对定位的伪元素上设置边框：
#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>