如何去除 CSS 中播放按钮和徽标 img 下的边框？

Question

如何去除 CSS 中播放按钮下方和徽标 img 周围的边框？如何去除 CSS 中播放按钮下方和徽标 img 周围的边框？如何去除 CSS 中播放按钮下方和徽标 img 周围的边框？如何去除 CSS 中播放按钮下方和徽标 img 周围的边框？如何在 CSS?

中删除播放按钮下方和徽标 img 周围的边框

.fullscreen {
                height: 100%;
                width: 100%;
                background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
            }
            .line_horiz {
                position: absolute;
                width: 3px;
                height: 100%;
                background-color: rgba(255, 255, 255, 1);
                top: 0;
                left: 50%;
            }
            .line_vert {
                position: absolute;
                width: 100%;
                height: 3px;
                background-color: rgba(255, 255, 255, 1);
                top: 20%;
                left: 0;
            }
            .logo-img {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 3px solid #ffffff;
                background: #ffffff;
                transform: translate(-50%, -50%);
                top: 20%;
                left: 50%;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                text-transform: uppercase;
            }
            .btn {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 3px solid #ffffff;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                z-index: 1;
            }
            .btn::after {
                content: '';
                display: block;
                width: 60px;
                height: 60px;
                background: #ffffff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

<div class="fullscreen">
            <span class="line_vert"></span>
            <span class="line_horiz"></span>
            <div class="logo-img">Logo img</div>
            <div class="btn"></div>
        </div>

Answer 1

由于水平线和垂直线是样式而非信息内容，因此建议将它们从 HTML 的正文中删除，而是在全屏元素的背景上使用线性渐变来创建它们。这样他们就不会被屏幕阅读器看到。此外，使用线性渐变意味着我们可以在我们想要的行中使用 'gaps'。

此代码段仅计算 btn 元素的间隙，因为徽标元素的背景为白色，因此 'line' 正好穿过并不重要。如果这种情况发生变化，则采用与 btn 类似的方式进行间隙计算的线性梯度。

请注意，已使用并明确说明了带内容的框大小调整（因此计算中包含边框且填充设置为零），以防它在代码的其他地方被更改。

body {
  width: 100vw;
  height: 100vh;
}

.fullscreen {
  /* set up some variables to make it easier to change things later if you want to */
  --logoMid: calc(20% - var(--borderW));
  --btnW: 100px;
  --btnMid: 50%;
  /* position from the top to the middle of the btn */
  --borderW: 3px;
  --btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
  /* actual position of top of btn element */
  --btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
  background-size: var(--borderW) 100%, 100% var(--borderW), cover;
  background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
  background-repeat: no-repeat no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
}

.logo-img {
  box-sizing: content-box;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #ffffff;
  background: #ffffff;
  transform: translate(-50%, -50%);
  top: 20%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.btn {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #ffffff;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
}

.btn::after {
  box-sizing: content-box;
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="fullscreen">
  <div class="logo-img">Logo img</div>
  <div class="btn"></div>
</div>

注意：运行全屏显示的代码段，因为在小代码段视口中没有足够的空间显示徽标和 btn 之间的间隙。

Answer 2

这是我的解决方案，它并不完美，但它会给你一个很好的起点。

我已经更改了您的 HTML 结构，删除了创建线条的 div，相反，我使用了伪选择器来绘制线条。

请注意，您必须调整其中一些数字以适合您的内容。

请运行全屏模式下的例子

.fullscreen {
  height: 100vh;
  width: 100%;
  background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}

.logo-img {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #ffffff;
  background: #ffffff;
  transform: translate(-50%, -50%);
  top: 100px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.logo-img:before {
  content: "";
  position: absolute;
  height: 3px;
  width: calc(50vw - 90px);
  background-color: #ffffff;
  top: 50%;
  left: 130px;
  display: block;
}

.logo-img:after {
  content: "";
  position: absolute;
  height: 3px;
  width: calc(50vw - 90px);
  background-color: #ffffff;
  top: 50%;
  right: 130px;
  display: block;
}

.btn {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #ffffff;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
}

.btn .inner {
  width: 100%;
  height: 100%;
  background: white;
}

.btn:after {
  content: "";
  display: block;
  width: 3px;
  height: calc(50vh - 48px);
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 50%;
}

.btn:before {
  content: "";
  display: block;
  width: 3px;
  top: calc(-50vh + 220px);
  background: #ffffff;
  position: absolute;
  bottom: 100%;
  left: 50%;
}

<div class="fullscreen">
  <div class="logo-img">Logo img</div>
  <div class="btn">
    <div class="inner"></div>
  </div>
</div>

如何去除 CSS 中播放按钮和徽标 img 下的边框？

How to remove borders under play button and logo img in CSS?

css

border