8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 盒子阴影的线性渐变

盒子阴影的线性渐变

Dreamify App 3月前
57 0

我尝试使用下面的代码创建一个具有线性渐变的框阴影，主要是为了遮盖下面列出的 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 上寻找解决方案，但没有任何帮助。

帖子版权声明 1、本帖标题：盒子阴影的线性渐变
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Dreamify App在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    您可以使用 ::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>
  • 引用 3楼

    看起来似乎是，但实际上不是。我不需要渐变的边框。我需要渐变的阴影。边框大小设置为 0px，因为我本质上想要的只是阴影。如果你将代码放入编辑器并查看它，你就会明白我想表达的意思。我希望阴影是渐变的。而不是边框​​。

  • 引用 4楼

    欢迎来到 Stack Overflow。请参阅有关 markdown 格式的指南，以便更好地格式化问题：

返回
作者最近主题：