使CSS卡稍微透明

Question

我想做这样的东西

如您所见，中心的相邻边框比其他部分稍暗。如何用css制作？

Answer 1

更新#2023-08-22

对动画进行说明似乎也是个好主意。我的原始回复可以在下面阅读。

这很简单。我们使用 JavaScript 设置鼠标移动事件的侦听器。发生这种情况时，我们根据

.blob

（固定位置）类的位置和当前光标位置来调整

.fakeblob

类的位置。这样，当您移动鼠标光标时，卡片上会出现一个微弱的圆圈。通过使用 CSS z-index 设置，我们确保圆圈仅在卡片内可见。享受尝试该模式的乐趣！

这个想法的灵感来自于代码“yxsh”。

const all = document.querySelectorAll(".grid > div");

/* event listener for mouse moving */
window.addEventListener("mousemove", (ev) => {
  /* set blob on all elements */
  all.forEach((e) => {
    const blob = e.querySelector(".blob");
    const fakeblob = e.querySelector(".fakeblob");
    const rec = fakeblob.getBoundingClientRect();
    blob.style.opacity = "1";
  
    blob.animate([{
      transform: `translate(${
        (ev.clientX - rec.left) - (rec.width / 2)
      }px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
    }], {
      duration: 300,
      fill: "forwards"
    });
  });
});

:root {
  --blob-color: rgb(255, 255, 255, 0.5); /* to animation */
  --blob-size: 100px; /* to animation */
  --blob-strong: 40px; /* to animation */
}

/* grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 500px;
  height: 300px;
  background-image: url(https://i.stack.imgur.com/QYZq3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* element */
.grid > div {
  position: relative; /* <--- to animation */
  overflow: hidden;
  padding: 3px;
  margin: 0;
}

/* element parts: inner, blob, fakeblob */

/* inner: to readable content */
.grid > div > .inner {
  position: relative;
  z-index: 1;
  border-radius: 7px;
  padding: 10px;
  width: 210px;
  height: 150px;
  color: white;
  backdrop-filter: blur(1px); /* <--- to readable text */
}

/* blob: to animation */
.grid > div > .blob {
  filter: blur(var(--blob-strong));
  position: absolute;
  z-index: 0;
  top: 0;
  opacity: 0;
  left: 0;
  width: var(--blob-size);
  height: var(--blob-size);
  border-radius: 50%;
  background: var(--blob-color);
}

/* fakeblob: to animation */
.grid > div > .fakeblob {
  display: hidden;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: calc(var(--blob-size) * 0.8);
  height: calc(var(--blob-size) * 0.8);
  border-radius: 50%;
}

<div class="grid">
  <div>
    <div class="inner">Text Here</div>
    <div class="blob"></div>
    <div class="fakeblob"></div>
  </div>
  <div>
    <div class="inner">Text Here</div>
    <div class="blob"></div>
    <div class="fakeblob"></div>
  </div>
  <div>
    <div class="inner">Text Here</div>
    <div class="blob"></div>
    <div class="fakeblob"></div>
  </div>
  <div>
    <div class="inner">Text Here</div>
    <div class="blob"></div>
    <div class="fakeblob"></div>
  </div>
</div>

原答案

可以使用

linear-gradient()

或

radial-gradient

。

要设置渐变背景，可以使用

background

参数。对于渐变边框，您可以使用

border-image-source

。

您的请求不是很清楚，但我假设您希望将四个元素的端点指向网格的中心。在这种情况下，我必须单独设置四个元素中每个元素的背景和边框的渐变，以沿所需的方向辐射。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 500px;
  height: 300px;
  background-image: url(https://i.stack.imgur.com/QYZq3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.grid div {
  background-color: rgba(255, 255, 255, 0.1); /* if linear-gradient() not working on browser */
  border-width: 1px;
  border-style: solid;
  border-image-slice: 1;
  height: 100%;
  width: 100%;
}

.grid div:nth-child(1) {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
  border-top-width: 0;
  border-left-width: 0;
  border-image-source: linear-gradient(to bottom right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(2) {
  background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
  border-top-width: 0;
  border-right-width: 0;
  border-image-source: linear-gradient(to bottom left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(3) {
  background: linear-gradient(to top right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
  border-bottom-width: 0;
  border-left-width: 0;
  border-image-source: linear-gradient(to top right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(4) {
  background: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
  border-bottom-width: 0;
  border-right-width: 0;
  border-image-source: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

您必须稍微调整一下设置才能获得您想要的效果，但这里有一个使用图像蒙版的示例。我使用遮罩是因为它还可以覆盖组件上的边框。然而，我无法让它考虑到盒子阴影，并且透明度也会影响卡片中的任何内容。为了避免这种情况，您需要将两个元素分层。

另一种方法是对卡片背景使用透明渐变并完全忘记遮罩，但这样不会使边框褪色。我只看到第一个盒子上有边框，而没有看到其他盒子，所以不完全确定你想要什么。完全如图所示吗？您可能需要单独调整 4 个框中的每一个，并且可能需要将多个元素包装在一起以获得准确的外观。

body{
  background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E); 
  background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E); 
}

.card{
  
  width:200px;height:200px;
  background: linear-gradient(135deg, rgba(53,56,57,1) 0%, rgba(53,56,57,1) 100%);
  border:2px solid #888;
  
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1));


-webkit-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);
box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);

    
}

<div class="card">

</div>