html - 堆叠时边框中的自定义渐变不起作用
问题描述
我有这个例子,我试图用 CSS 中的渐变制作边框:https ://codesandbox.io/s/sparkling-pine-uvdcj?file=/src/styles.css
如您所见,我能够在第一张卡片中显示边框,即未堆叠到容器中的边框(只是一个带有背景的简单 div)。
当我将相同的组件放入另一个元素(作为容器)时,我根本无法显示边框。
问题是什么?
这里是 CSS 和 HTML:
body {
background-color: gray;
}
.container {
background-color: black;
padding: 10px;
margin: 10px;
}
.card {
position: relative;
margin-top: 32px;
width: 300px;
height: 180px;
border-radius: 32px;
background: linear-gradient(45deg, #1b1a1f, #1b1a1f 65%, rgba(77, 58, 40, 1));
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}
.card:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 182px;
width: 302px;
border-radius: inherit;
margin: -1px;
background: linear-gradient(40deg, #1b1a1f, #1b1a1f 60%, #ffb966 90%);
z-index: -1;
}
<div class="card"></div>
<div class="container">
<div class="card"></div>
</div>
解决方案
发生这种情况是因为您已经给出了.card:after
z-index
of -1
。而默认值z-index
是auto
,或者您可以将其视为0
.
因此,container
具有z-index
的auto
高于 z-index
的.card:after
。这就是为什么它在black
后台。
你可以这样做:
- 将以下样式添加到
.container
.
.container {
position: relative;
z-index: -2;
}
在Codepen上进行检查。
推荐阅读
- c - mktime() 返回大量秒数
- powershell - 在管道中显示两种方法
- ruby - 如何在 Nokogiri 中提取部分文本
- php - exec() 如何工作 - PHP 和 Wordpress
- node.js - nodejs smtp-server 电子邮件已发送但未收到
- angular - Angular CLI 版本 7.3.3 与 Typescript 版本 3.3.3333 不兼容
- c# - 创建了多个 Ninject Singleton 实例
- arrays - 运行 Apps 脚本以迭代数组时出现类型错误
- node.js - heroku 没有显示 Procfile 文件 Discord.js
- authentication - 使用 openssl 的 .p7b 文件的两种方式 SSL 身份验证