Question

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

Answer 1

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

以下是一个框顶部和底部的几个简单示例，并在下面加上一些文字。你将不得不玩它（可能很多）让它看起来你想要的，但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

尝试使用：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 3

不幸的是，这是不可能的。我建议你只使用一个带有你在Photoshop上创建的背景图像的div。

Answer 4

两个div是必需的：

1：线性渐变+模糊：

.gr{/* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );  

filter:blur(10px);

height:200px;
}

2：相反，是内容。

.zz {background:#fff;  position: relative; top:-200px;
height:200px;
}

然后：

<div class='gr'></div>
<div class='zz'>BOX</div>

DEMO

Answer 5

要创建彩虹渐变框阴影：

.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 6

晚了聚会，但也许有人会觉得有用！实际上，您可以在框阴影上使用多个阴影来做到这一点：

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

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

旁注：这可能有点“棘手”，但在某些情况下会有所帮助。

Answer 7

如果要在背景图像上创建半透明的覆盖层，则可以使用以下样式规则来实现，而无需使用box-shadow。

background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                  rgba(255, 255, 255, 0.5)),
                  url("background.png");

请参见background-image on MDN。

CSS3 Box-Shadow线性渐变？

7 个答案: