部分背景在红色边框周围形成边框

Question

怎么整个边框都是细线，能去掉吗？

看起来部分背景正在围绕红色边框形成边框。

可以修复吗？

这就是整个问题

一张是边框放大的图片，一张是没有放大的。

背景怎么会在红色边框周围形成边框，那是怎么固定的？

 (function manageCurtain() {
   "use strict";

   function hide(el) {
     el.classList.add("hide");
   }

   function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     hide(cover);
     const curtain = document.querySelector(".outer");
     curtain.classList.add("slide");
     //curtain.classList.add("fadeout");
     const wrap = document.querySelector(".wrap");
     wrap.classList.remove("hide");
    
   }

   const cover = document.querySelector(".play");
   cover.addEventListener("click", coverClickHandler);
 }());


 const videoPlayer = (function makeVideoPlayer() {
   "use strict";

   let player = null;

   const tag = document.createElement("script");
   tag.src = "https://www.youtube.com/iframe_api";
   const firstScriptTag = document.getElementsByTagName("script")[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   function onPlayerReady(event) {
     player = event.target;
     player.setVolume(100); // percent
   }
   let hasShuffled = false;

   function onPlayerStateChange(event) {
     player = event.target;
     const shufflePlaylist = true;

     if (!hasShuffled) {
       player.setShuffle(shufflePlaylist);
       player.playVideoAt(0);
       hasShuffled = true;
     }
   }

   function addPlayer(video) {

     const playlist = "M7lc1UVf-VE";
     const config = {
       height: 360,
       host: "https://www.youtube-nocookie.com",
       width: 640
     };
     config.playerVars = {
       autoplay: 0,
       cc_load_policy: 0,
       controls: 1,
       disablekb: 1,
       fs: 0,
       iv_load_policy: 3,
       loop: 1,
       playlist,
       rel: 0
     };
     config.events = {
       "onReady": onPlayerReady,
       "onStateChange": onPlayerStateChange
     };
     player = new YT.Player(video, config);

   }

   return {
     addPlayer
   };
 }());

 function onYouTubeIframeAPIReady() {
   const cover = document.querySelector(".play");
   const wrapper = cover.parentElement;
   const frameContainer = wrapper.querySelector(".video");
   videoPlayer.addPlayer(frameContainer);
 }

 (function iife() {
   "use strict";

   function show(el) {
     el.classList.remove("hide");
   }

   function coverClickHandler(evt) {
     const wrapper = evt.currentTarget.parentElement;
     show(wrapper);
     
   }
   const cover = document.querySelector(".play");
   cover.addEventListener("click", coverClickHandler);
 }());

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;

}

.fadeout .split-wrap {
  opacity: 0;
  transition: opacity 1s ease 3s, width 0s 10s, height 0s 10s;
}

.outer {
  position: relative;
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain {
  max-width: 640px;
  margin: auto;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
}

.curtain-ratio-keeper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: transparent;
}

.slide-wrap:before,
.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.slide-wrap:before {
  left: 0;
}

.slide-wrap:after {
  right: 0;
}

.slide .slide-wrap::before {
  transform: translateX(-100%);
}

.slide .slide-wrap::after {
  transform: translateX(100%);
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.hide {
  display: none;
}

<div class="outer">
  <div class="tcell">
    <div class="curtain">
      <div class="curtain-ratio-keeper">

          <div class="wrap hide">
            <div class="video video-frame"></div>
          </div>

          <div class="slide-wrap"></div>
        </div>


                    <svg class="play " width="100%" height="100%" viewBox="0 0 64 64">
                        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
                    </svg>
        </div>

      </div>
    </div>

Answer 1

我觉得没问题，到底是什么问题？您描述的这种效果可能是您的屏幕在某些缩放级别模糊了像素，或者是一种称为 Mach bands

的视觉错觉

部分背景在红色边框周围形成边框

Parts of the background are forming a border around the red border

css

border

background-image