,html,css,border"/>
时间戳

首页 > 解决方案 > 在周围创建边框

html - 在周围创建边框

问题描述

我之前通过在身体周围创建边框的尝试很好，但是在想要创建边框旋转动画之后，我不得不在我的所有内容周围创建一个 div，但问题是每当我尝试在该 div 周围创建一个边框时，它根本不显示。

@use postcss-preset-env;
@use postcss-nested;
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.loader {
  border: 5px solid white;
  border-style: solid;
  display: block;
  overflow: hidden;
  border-width: 5px;
}
<div class="loader">

  <div class="content">
    <button id="myBtn" onclick="toggleMute()">Mute</button>
  </div>

  <script>
    var video = document.getElementById("video");
    var btn = document.getElementById("myBtn");
    var muted = video.getAttribute("muted");

    function toggleMute() {
      if (muted) {
        video.removeAttribute("muted");
        btn.innerHTML = "Mute";
      } else {
        video.setAttribute("muted");
        btn.innerHTML = "Unmute";
      }
    }
  </script>


  <div class="outer-box-frame">
    <video autoplay muted loop id="video">
        <source src="video/videoplayback.mp4">
    </video>
  </div>

</div>

标签： htmlcssborder

解决方案

您在线条处使用白色边框颜色。

CSS：

border: 5px solid white;

使用白色以外的其他颜色，您的背景是白色的。

border: 5px solid red; //red for example

或者尝试浏览器的开发者模式。（右键单击 > 在 Chrome 中检查）

推荐阅读