Question

我在 Figma 中使用多个矩形设计了一个发光边框设计。现在我正在尝试在 CSS 中创建类似的边框。下面我附上了 Figma 链接和 CodePen 链接，我试图在其中实现类似的结果。

https://www.figma.com/file/NsHEFgiiL6ejAPSJcKmipx/glowing-border?node-id=0%3A1

https://codepen.io/bishal001/project/editor/DWdQYw

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #060c21;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}

.box {
  position: relative;
  width: 1011px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-content: center;
  background: #060c21;
  padding: 25px;
}

.box::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: #fff;
  z-index: -1;
}

.box::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: #fff;
  z-index: -1;
  filter: blur(14px);
}

.box::before {
  border: 10px solid white;
}

.box::after {
  background: #00a8a8;
}

h1 {
  margin-bottom: 10px;
}

p {
  line-height: 24px;
}

.border {
  mix-blend-mode: hard-light;
  border: 10.3458px solid #00a8a8;
  box-sizing: border-box;
  box-shadow: inset -1.03458px 2.06917px 1.03458px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0px 15.9167px 20.6917px #009999), drop-shadow(0px 10.3458px 7.95833px rgba(0, 77, 70, 0.7));
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Glowing Border</title>
  <link rel="stylesheet" href="main.css">


</head>

<body>
  <div class="box">
    <div class="content">
      <h1>Glowing Border</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis nobis quae, non ab iste ipsum distinctio totam iusto ipsam inventore quidem velit, quos earum repellendus sunt quam aperiam eius.Iure, ad molestias, earum dolorum incidunt
        officiis sequi sapiente consequuntur fuga labore eveniet rerum expedita saepe, iusto recusandae repellat id voluptas vero quae consectetur? Odit veritatis asperiores cumque esse culpa.</p>
    </div>
  </div>


</body>

</html>

谢谢。

发光边框效果 CSS

0 个答案: