8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

盒子阴影的线性渐变

Dreamify App 3月前

55 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)
  • 您可以使用 ::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>
返回
作者最近主题: