CSS3 Box-Shadow线性渐变？

Question

在CSS3中有没有办法创建一个跨浏览器(即:Mozilla,Webkit和Opera)插入框阴影,它将从顶部的黑色过渡到底部的白色？我发现这样做的最接近的方式只允许阴影的外部为一种颜色,然后在内页上转换为另一种颜色:http://www.css3.info/preview/box-shadow /

Answer 1

看看Lea Verou的这段视频.我链接的部分讨论了一些非常相似的东西,你使用背景图像渐变来制作类似盒子阴影的东西.如果我能找到一个好的工作示例,我会发一个答案,但这应该给你一个好的起点.你也可以做一些非常酷的东西,比如带有伪类的盒子阴影卷曲:after来显示阴影.

以下是一个框顶部和底部的一些简单示例,并在下面加上一些文字.你将不得不玩它(可能很多),让它看起来你想要的,但CSS有一些非常棒的功能(并会有越来越多).

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: '\00a0';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

<div class="container">
  <div class="underline">Hello, world!</div>
</div>

Answer 2

聚会迟到了，但也许有人会发现它很有用！您实际上可以在 box-shadow 上使用多个阴影来做到这一点：

box-shadow: inset 0px 33px 25px 0 #000, 
            inset 0 66px 15px 0px #ccc,
            inset 0 99px 5px 0px #fff;

代码笔示例：https ://codepen.io/InFecT3D/pen/JQdmeL

旁注：这可能有点“hacky”方法，但在某些情况下它会有所帮助。

Answer 3

要创建彩虹渐变框阴影：

.innerSquare {
  background-color: white;
  border-radius: 5px;
  height: 100%;
  width: 100%;
}
    
.rainbowGradient {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px; 
  border-radius: 5px;
  box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
}

<div class="rainbowGradient">
  <div class="innerSquare">
    <h1>Hello World!</h1>
  </div>
</div>

    

Answer 4

尝试使用 :before 元素来设置“阴影”。

  .classname {
    &:before {
      content: '';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

上面的代码是有关如何设置此类悬停效果的示例。

Answer 5

不幸的是，这是不可能的。我建议只使用带有您在 Photoshop 或类似工具上创建的背景图像的 div。