Html css div渐变阴影/边框_Html_Css_Shadow

Html css div渐变阴影/边框

html css

Html css div渐变阴影/边框,html,css,shadow,Html,Css,Shadow,我正努力做到这一点：我找不到类似的东西，但以下是我失败的尝试：一个{ 宽度：200px；高度：100px；背景色：白色；盒影：0px 0px 20px 2D8DBD；左：50px；显示：内联块；右边距：-100px； } 两个{ 宽度：200px；高度：100px；背景色：白色；盒影：0px 0px 20px b22d；左：-50px；显示：内联块；左边距：-50px； z指数：-1； } 您可以使用背景渐变和长方体阴影以及css伪元素来伪装一个边框。请注意，如果更

我正努力做到这一点：

我找不到类似的东西，但以下是我失败的尝试：

一个{ 宽度：200px；高度：100px；背景色：白色；盒影：0px 0px 20px 2D8DBD；左：50px；显示：内联块；右边距：-100px； } 两个{ 宽度：200px；高度：100px；背景色：白色；盒影：0px 0px 20px b22d；左：-50px；显示：内联块；左边距：-50px； z指数：-1； }

您可以使用背景渐变和长方体阴影以及css伪元素来伪装一个边框。请注意，如果更改周围内容的背景色，则必须更改444的每个实例

.外部{ 框大小：边框框；填充：25px；高度：200px；宽度：200px；盒影：0px 0px 10px 10px 444插页；边界半径：50%；背景：右下角线性渐变，rgb250,50,50，RGB50150250； } .外部：：之前{ 内容：；显示：块；位置：相对位置；左-26px；顶部：-26px；高度：202px；宽度：202px；边界半径：50%；边框：3px实心444；框大小：边框框； } .内部{ 位置：相对位置；顶部：-204px；左：-3px；边界半径：50%；背景：右下角线性渐变，EE21356279FF；填充：2px；高度：150像素；宽度：150px；盒影：0px 0px 30px-5px黑色； } .内容{ 身高：100%；宽度：100%；背景：444人；边界半径：50%； } /*造型只在这里过去*/ html，正文{ 文本对齐：居中；填充：0px；边际：0px；身高：100%；背景：444人； } 身体：：之前{ 内容：；显示：内联块；垂直对齐：中间对齐；身高：100%； } .外部{ 显示：内联块；垂直对齐：中间对齐； }

我理解你的要求，你需要在元素上有一个填充渐变效果的边框

这可以通过边界图像得到，但是边界半径不起作用

如果您的内部背景是黑色实心，则可以通过设置不同的背景，并使用背景剪辑和背景原点播放受每个背景影响的区域来实现

在代码片段中，有两个示例，一个具有径向渐变，另一个具有线性渐变

这一解决方案最好的一面是边界仍然是边界。您可以按照通常的方式设置宽度、半径等

.测试{ 宽度：250px；高度：200px；显示：内联块；保证金：5px；边界半径：20px；边框：实心10px透明； } 测试1{ 背景：线性渐变黑色，黑色，左上角的径向梯度圆，红色30px，透明150px，右上角的径向梯度圆，蓝色30px，透明150px，青色；背景剪辑：内容框、边框框、边框框、边框框；背景来源：内容框、边框框、边框框、边框框； } 测试2{ 背景：线性渐变黑色，黑色，线性渐变至右下角，红色30px，透明150px，线性渐变至左下角，蓝色30px，透明150px，青色；背景剪辑：内容框、边框框、边框框、边框框；背景来源：内容框、边框框、边框框、边框框； }

您可以使用单个元素，结合伪元素作为边界来实现这一点。这可能比边框图像具有更高的浏览器兼容性

模拟演示

html，身体{ 保证金：0；填充：0； } html{ 背景：222人； } div{ 高度：200px；宽度：200px；背景：灰色；位置：相对位置；边界半径：10px；保证金：20px自动； } 部门：以前{ 内容：；位置：绝对位置；前-5%；左-5%；边界半径：继承；身高：110%；宽度：110%； z指数：-1；背景：右下角线性渐变，rgba250，50，50，0.5，rgba50，150，250，0.5，左下角线性渐变，蓝色30px，透明150px；盒影：嵌入0 10px 5px 222； }

这是通过CSS网格完成的，没有JavaScript。看看它，看看这是否是你要找的

对渐变使用“排列”值，并使用逗号分隔的多个渐变。请参阅。可能的副本-请参阅此问题的第二个答案！虽然我已经把你的代码带到了你的问题中，它应该在哪里，不管外部演示是一种奖励，但不是替代，我没有纠正你的HTML；换行符是否正确。该元素是不推荐使用的HTML4和XHTML1，不应该使用。很高兴它有帮助！

 <html>
  <body>
    <div class="grid">
      <div class="blurBox"></div>
      <div class="inputBox">
        <div class="fName">f</div>
        <div class="lName">l</div>  
      </div>
    </div>
  </body>
</html>

body {
  background-color: black;
  color: white;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
  //border: 1px solid white;  
}

.blurBox {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
  background: linear-gradient(-45deg, red, blue);
  filter: blur(5px);
  border-radius: 5px;
}

.inputBox {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
  margin: 7px;
  background: black;
  border: 1px solid white;
  border-radius: 5px;
  z-index: 1;
}

.fName {
  margin: 20px;
  border: 1px solid white;
}

.lName {
  margin: 20px;
  border: 1px solid white;
}