CSS3 中有没有办法创建一个跨浏览器（即：Mozilla、Webkit 和 Opera）的插入框阴影，该阴影将从顶部的黑色过渡到底部的白色？我发现这样做的最接近的方法只允许阴影的外部是一种颜色，然后在内部过渡到另一种颜色，在这个页面上：http ://www.css3.info/preview/box-shadow /
问问题
117694 次
9 回答
22
看看Lea Verou 的这段视频。我链接到的部分讨论了非常相似的内容，您可以使用背景图像渐变来制作类似于盒子阴影的东西。如果我能找到一个很好的工作示例，我会发布一个答案，但这应该给你一个很好的起点。你也可以做一些很酷的事情，比如使用伪类的box shadow curl来制作阴影。: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>于 2013-04-05T18:17:44.010 回答
22
派对迟到了，但也许有人会觉得它有用！实际上，您可以在 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”的方法，但在某些情况下它会有所帮助。
于 2019-06-13T09:12:02.880 回答
8
要创建彩虹渐变框阴影：
.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>
于 2020-07-11T17:02:22.773 回答
3
不幸的是，这是不可能的。我建议只使用您在 Photoshop 或类似方法上创建的带有背景图像的 div。
于 2012-03-10T20:19:56.083 回答
3
尝试使用 :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;
}
}
}
上面的代码是关于如何设置这种悬停效果的示例。
于 2016-03-23T20:30:33.373 回答
3
如果打算在背景图像上创建半透明覆盖，则可以使用以下样式规则来实现，而无需box-shadow.
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(255, 255, 255, 0.5)),
url("background.png");
于 2019-10-20T12:55:29.010 回答
2
需要两个 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>
于 2018-06-25T09:03:18.140 回答
0
另一种方法是设置白色背景，并制作阴影（从黑色到透明）
例子：
box-shadow: 0 1px 100px 0 rgb(0 0 0 /30%);
于 2021-09-27T10:32:34.710 回答
0
您可以使用<iframe>在视频或图像等元素上实现渐变效果。
HTML：
<iframe width="720" height="515"
<img src="image.png">
</iframe>
CSS：
iframe{
border:none;
background: -webkit-linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
background: linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
z-index:0;
padding:5px;
}
于 2022-02-15T22:55:07.063 回答