CSS 悬停效果。元素的边框没有被覆盖

Question

The first button is without the hover effect and it looks good, however in the second one with the hover effect, there is some small space not covered because of the border.第一个按钮没有悬停效果，看起来不错，但是在第二个有悬停效果的按钮中，由于边框而没有覆盖一些小空间。 Any idea what causes that?知道是什么原因造成的吗？

Here's the code I wrote:这是我写的代码：

 :root { font-size: 1em; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } a { text-decoration: none; } .container { padding: 2em; } .button { position: relative; display: inline-block; text-transform: uppercase; font-size: 1.1rem; font-weight: 800; color: #fff; background: #038C7E; padding: .85em 1.25em; letter-spacing: .05em; box-shadow: 4px 3px 8px 0 rgba(0, 0, 0, .25); border-radius: .35em; border-width: 0 0 .1875em 0; border-style: none none solid none; border-color: transparent transparent rgba(0, 0, 0, .25) transparent; } .button::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: .2; background: #000; border-radius: inherit; transform: scaleX(0); transform-origin: 50%; transition: transform ease-in-out .3s; } .button:hover::before { transform: scaleX(1); }

 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="button-hover-shutterout.css"> <title>Button Hover Shutterout</title> </head> <body> <div class="container"> <a class="button" href="#" role="button">Learn More</a> </div> </body> </html>

Answer 1

in the button class add overflow: hidden;在按钮类中添加overflow: hidden; and in the button::before remove border-radius: inherit;并在 button::before remove border-radius: inherit; like the following:像下面这样：

.button {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: #038C7E;
  padding: .85em 1.25em;
  letter-spacing: .05em;
  box-shadow: 4px 3px 8px 0 rgba(0, 0, 0, .25);
  border-radius: .35em;
  border-width: 0 0 .1875em 0;
  border-style: none none solid none;
  border-color: transparent transparent rgba(0, 0, 0, .25) transparent;
  overflow: hidden;/*Add This */
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  background: #000;
  /* border-radius: inherit; */
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform ease-in-out .3s;
}

CSS 悬停效果。元素的边框没有被覆盖

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-22 19:07:59

CSS 悬停效果。 元素的边框没有被覆盖

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-22 19:07:59

CSS 悬停效果。元素的边框没有被覆盖

解决方案1
1 已采纳 2020-10-22 19:07:59