带盒阴影的圆角边缘 - Tailwind CSS

Question

Jan Vladimir Mostert

Asked: 2023-08-18 06:04:36 +0800 CST2023-08-18 06:04:36 +0800 CST 2023-08-18 06:04:36 +0800 CST

是否可以在元素之间对齐渐变？

772

我试图在日历中为过去的日子添加渐变，但渐变线未对齐看起来有点无聊。

div.month {
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--color-border);

}

div.day {
  background-color: var(--color-fill);
}

div.day + .past {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-fill),
    var(--color-fill) 1.5rem,
    var(--color-gradient-calendar-past) 1.5rem,
    var(--color-gradient-calendar-past) 3rem
  );
}

<div class="month noselect">
        <div class="day void"><div class="day-number"></div></div>
        <div class="day past"><div class="day-number">1</div></div>
        <div class="day past"><div class="day-number">2</div></div>
        <div class="day past"><div class="day-number">3</div></div>
        <div class="day past"><div class="day-number">4</div></div>
        ...
        <div class="day today"><div class="day-number">17</div></div>

如果不将日子变成正方形（aspect-ratio: 1/1），是否可以对齐这些梯度？

我在想也许我可以让整个组件的背景变成渐变，但是如果我想在其他日子使用不同颜色的相同渐变，我就会遇到同样的问题。

2 个回答

Voted

RANGO · Answer 1 · 2023-08-18T07:05:54+08:00

我会这样做：

使用渐变作为背景div.month并将其设为红色。对于正常情况，div.day您添加白色背景，对于正常情况，.past您使背景透明并添加backdrop-filter.

div.month {
    height: 23vW;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: repeating-linear-gradient(-45deg, #fff, #fff 1.5rem, #fdc5d0 1.5rem, #fdc5d0 3rem );
}

div.day {
    border: 1px solid #fff;
    background-color: #fff;
}

div.day + .past {
    background-color: #0000;
    backdrop-filter: grayscale(1) brightness(1.13);
}

div.day + .blocked {
    background-color: #0000;
}

<div class="month noselect">
    <div class="day void"><div class="day-number"></div></div>
    <div class="day past"><div class="day-number">1</div></div>
    <div class="day past"><div class="day-number">2</div></div>
    <div class="day past"><div class="day-number">3</div></div>
    <div class="day past"><div class="day-number">4</div></div>
    <div class="day past"><div class="day-number">5</div></div>
    <div class="day past"><div class="day-number">6</div></div>
    <div class="day past"><div class="day-number">7</div></div>
    <div class="day blocked"><div class="day-number">8</div></div>
    <div class="day past"><div class="day-number">10</div></div>
    <div class="day past"><div class="day-number">11</div></div>
    <div class="day past"><div class="day-number">12</div></div>
    <div class="day past"><div class="day-number">13</div></div>
    <div class="day past"><div class="day-number">14</div></div>
</div>

通过使用grayscale(1)背景不再是红色，然后我稍微提高亮度。

我假设您想使用红色来表示阻止的日期。如果您想使用红色和灰色之外的更多颜色（例如假期绿色），您可以使用hue-rotate：

div.day + .holiday {
    backdrop-filter: hue-rotate(123deg);
}

disinfor · Answer 2 · 2023-08-18T06:37:01+08:00

我认为这可能会让你到达那里，但如果没有实际的代码，很难说。

这会将整个容器的背景设置为background-gradient.
它将相同的背景渐变设置为具有该类的元素::after的伪元素（这是您可能需要针对应用程序进行修改的位置）。daytoday
我们没有在day元素上设置位置，因此 usingposition: absolute会将pseudo元素定位到month我设置的元素position: relative上。
然后您可以使用clip-path: content-box;将视图限制pseudo为仅.today包含类元素。

:root {
  --color-border: lightgray;
  --color-fill: white;
  --color-gradient-calendar-past: lightgray;
  --color-gradient-calendar-now: pink;
}

div.month {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-past) 1.5rem, var(--color-gradient-calendar-past) 3rem);
}

div.void {
  background: white;
}

div.day {
  height: 200px;
}

div.today::after {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-now) 1.5rem, var(--color-gradient-calendar-now) 3rem);
}

div.today {
  clip-path: content-box;
}

<div class="month noselect">
  <div class="day void">
    <div class="day-number"></div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
</div>

使用`inset(0)`

:root {
  --color-border: lightgray;
  --color-fill: white;
  --color-gradient-calendar-past: lightgray;
  --color-gradient-calendar-now: pink;
}

div.month {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-past) 1.5rem, var(--color-gradient-calendar-past) 3rem);
}

div.void {
  background: white;
}

div.day {
  height: 200px;
}

div.today::after {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-now) 1.5rem, var(--color-gradient-calendar-now) 3rem);
}

div.today {
  clip-path: inset(0);
}

<div class="month noselect">
  <div class="day void">
    <div class="day-number"></div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
</div>

是否可以在元素之间对齐渐变？

使用`inset(0)`

使用 <font color="#xxx"> 突出显示 html 中的代码

为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类？

您可以使用花括号初始化列表作为（默认）模板参数吗？

为什么列表推导式在内部创建一个函数？

我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

为什么 'char -> int' 是提升，而 'char -> Short' 是转换（但不是提升）？

为什么库中不调用全局变量的构造函数？

std::common_reference_with 在元组上的行为不一致。哪个是对的？

C++17 中 std::byte 只能按位运算？

是否可以在元素之间对齐渐变？

2 个回答

使用inset(0)

相关问题

使用`inset(0)`