我尝试使用下面的代码创建一个具有线性渐变的框阴影,主要是为了遮盖下面列出的 div 上方的照片的边缘线。显然这不起作用,而且我有...
我尝试使用下面的代码创建一个具有线性渐变的框阴影,主要是为了遮盖下面列出的 div 上方的照片的边缘线。显然这不起作用,我很难找到解决方案。它给我一个纯色,没有渐变。有人知道如何正确地做到这一点吗?
.underimgborder {
border: 0px solid #00ff89;
border-image: linear-gradient(to right, rgba(47, 47, 47, 0.048), rgb(0, 255, 136), rgba(47, 47, 47, 0.085))1;
box-shadow: 0 0 40px 40px #00ff89;
position: relative;
}
<div class="underimgborder"></div>
我尝试在 YouTube 和 Google 上寻找解决方案,但没有任何帮助。
您可以使用 ::before 或 ::after 等伪元素来创建渐变背景并实现所需效果。您可以根据需要更改阴影值。
.box {
width: 150px;
height: 150px;
border: 2px solid green;
background: lightblue;
position: relative;
}
.basic {
box-shadow: 10px 8px 10px 5px orange;
}
.shadow:before {
content:"";
position: absolute;
inset: -5px;
transform: translate(10px,8px);
z-index: -1;
background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1761, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
filter: blur(10px);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
}
<div class="box shadow"></div>
<div class="box basic"></div>