html - 如何使没有边框(渐变背景)的按钮与有边框(轮廓)的按钮大小相同?
问题描述
我使用 Bootstrap v4 作为此代码的基础。本质上,我的问题是:我想为primary
按钮使用渐变背景,但我们也使用了outline
。因为没有真正支持渐变边框,所以我不确定如何最好地确保两个按钮最终具有相同的高度和宽度,并且primary
按钮上缺少 2px 边框。
上面的屏幕截图显示了问题。我确实想出了这个作为一种修复方法(在 Chrome 中效果很好):
background-color: var(--background) !important;
background-image: var(--gradient-background) !important;
border-width: 2px !important;
border-style: solid !important;
border-image-source: var(--gradient-background) !important;
border-image-slice: 1 !important;
哪个(在 Chrome 中)导致:
它准确地描述了我希望最终结果的样子。然而,在 Firefox 中,有一个奇怪的错误,结果如下:
最后,将边框设置为透明颜色会在两个浏览器中为边缘添加一种奇怪的效果:
这是一个乱七八糟但正确显示透明边框问题的 Codepen:https ://codepen.io/anon/pen/ymvYQX
因此,我希望执行以下任何操作-
1) 我希望得到一些帮助,弄清楚如何摆脱 Firefox 上的错误,使其呈现与 Chrome 上完全相同的效果。
2)或者,我还能如何解决原始问题?还有另一种方法可以强制调整按钮的大小吗?渐变边界线的更好替代方案怎么样?
谢谢你的帮助!
解决方案
您需要增加背景大小以覆盖边框,否则,您会看到它重复:
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #074c81;
border-color: #074575;
}
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary:hover {
color: #fff;
background-color: #08548d;
border-color: #074c81;
}
.btn:hover {
color: #58595b;
text-decoration: none;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
cursor: pointer;
}
.Button_root__2FLmr:hover, .Button_root__2FLmr:active, .Button_root__2FLmr:focus {
outline: none !important;
box-shadow: none !important;
}
.DrawerGroup_root___Kf5l button {
margin: 1rem 1rem 0 0 !important;
}
.btn-primary {
color: #fff;
background-color: #0a69b1;
border-color: #0a69b1;
box-shadow: none;
}
.btn {
display: inline-block;
font-weight: 400;
color: #58595b;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: 0px 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 9px;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
.Button_gradientBackground__2z0L9 {
background-color: #279DD9 !important;
background-image: linear-gradient(-60deg, #279DD9, #1169B2);
border: 2px solid transparent !important;
background-position:center;
background-size: calc(100% + 4px);/* or 101% is also fine */
}
.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}
.Button_root__2FLmr {
padding: 2px 1rem !important;
min-width: 7rem;
white-space: nowrap;
}
<div class="DrawerGroup_root___Kf5l">
<button type="button" class="Button_root__2FLmr Button_gradientBackground__2z0L9 btn btn-primary">save</button>
<button type="button" class="Button_root__2FLmr btn btn-outline-secondary">cancel</button>
</div>
推荐阅读
- visual-studio - 在同一项目中定位 V4.7.2 和 netcoreapp3.1。值不在预期范围内
- r - PCA - 如何可视化所有变量都处于不同/相同的比例
- python - 对python numpy中的负步进感到困惑
- amazon-web-services - AWS Glue ETL 作业和 AWS EMR 有什么区别?
- c++ - std::decay 和删除 const 限定符
- swift - 滑动 UITableViewCell 操作会影响表格视图中的每 4 个单元格,而不是仅影响目标单元格
- android - 如何在应用启动时更新 js 文件/代码
- reactjs - 如何将 http-proxy-middleware 与 react 和 passport.js 一起使用
- docker - 生产环境中的 presto docker 容器
- eclipse - 找不到 mdb ejb3