Css 野生边境虫
我需要做一个带渐变的左边框。但在狩猎中,它会在两侧显示。我已尝试将边界设置为0和0。我还尝试使用-webkit-prefix 这是它在Safari上的外观: 和铬: 代码笔: HTML:Css 野生边境虫,css,safari,border,Css,Safari,Border,我需要做一个带渐变的左边框。但在狩猎中,它会在两侧显示。我已尝试将边界设置为0和0。我还尝试使用-webkit-prefix 这是它在Safari上的外观: 和铬: 代码笔: HTML: 我看不出你的代码有什么问题,但它极大地简化了代码,让我在Safari中也能正常工作: 所以,我放弃了,用伪类完成了) 嗯,没有边框可以吗?样式:实心?因为Chrome不会在没有这个属性的情况下渲染边框。我也看到了。但添加边框样式:在边框宽度规则之上添加实心边框似乎使其在Chrome/Safari/Firefo
我看不出你的代码有什么问题,但它极大地简化了代码,让我在Safari中也能正常工作:
所以,我放弃了,用伪类完成了)
嗯,没有边框可以吗?样式:实心?因为Chrome不会在没有这个属性的情况下渲染边框。我也看到了。但添加边框样式:在边框宽度规则之上添加实心边框似乎使其在Chrome/Safari/Firefox中保持一致。很抱歉,现在无法启动VM以检查IE/Edge。
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nam itaque nesciunt omnis, ut nihil veritatis adipisci corrupti velit. Reiciendis dolorem suscipit numquam expedita iure eum labore eos maxime rerum.</div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.content {
width: 320px;
height: 100px;
color: #333;
background-color: #fff;
padding: 10px;
border-left-style: solid;
-webkit-border-left-style: solid;
border-width: 0 0 0 3px;
-webkit-border-width: 0 0 0 3px;
border-image: linear-gradient(to bottom, #D71F49 0%, #2E3D59 100%) 1 100%;
border-right-width: 0px !important;
-webkit-border-right-width: 0px !important;
border-right: 0px !important;
-webkit-border-right: 0px !important;
border-right: none !important;
-webkit-border-right: none !important;
border-image-repeat: none;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.content {
width: 320px;
height: 100px;
color: #333;
background-color: #fff;
padding: 10px;
border-style: solid;
border-width: 0 0 0 3px;
border-image: linear-gradient(to bottom, #D71F49 0%, #2E3D59 100%) 1 100%;
border-image-repeat: none;
}
.content2 {
position: relative;
width: 320px;
height: 100px;
color: #333;
background-color: #fff;
padding: 10px;
}
.content2::before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom, #D71F49 0%, #2E3D59 100%);
}