Question

有什么方法可以让我在悬停时出现边框图像，这样它就不会改变元素的宽度？

＆＃13;

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

＆＃13;

Answer 1

在绝对定位的伪元素上设置边框：

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

border-image不会改变宽度

1 个答案: