在下面的代码中，渐变的宽度为100％，并超过了左侧的边框。
input {
background: transparent;
font-family:'Open Sans';
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
padding: 5px;
color: rgb(164, 164, 164);
}
input:focus {
outline: none;
border: 1px solid rgba(255, 255, 255, 0.5)
}
#demo {
background : transparent linear-gradient(to right, rgba(109, 179, 242, 0) 0%, rgb(24, 189, 70) 100%, rgba(54, 144, 240, 0) 0%, rgba(58, 107, 182, 0) 100%);
}
body {
background: hsla(0, 5%, 5%, 1) linear-gradient(to right top, rgba(10%, 0%, 0%, 1), rgba(0%, 0%, 0%, 1)) no-repeat fixed;
}<input type="text" id="demo" />
<input type="text" />为什么会发生这种情况，我该如何避免呢？
这是因为默认情况下背景将延伸到边框边缘。您可以background-clip通过设置属性来避免这种情况background-clip: padding-box;。
input {
background: transparent;
font-family:'Open Sans';
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
padding: 5px;
color: rgb(164, 164, 164);
}
input:focus {
outline: none;
border: 1px solid rgba(255, 255, 255, 0.5)
}
#demo {
background : transparent linear-gradient(to right, rgba(109, 179, 242, 0) 0%, rgb(24, 189, 70) 100%, rgba(54, 144, 240, 0) 0%, rgba(58, 107, 182, 0) 100%);
background-clip: padding-box;
}
body {
background: hsla(0, 5%, 5%, 1) linear-gradient(to right top, rgba(10%, 0%, 0%, 1), rgba(0%, 0%, 0%, 1)) no-repeat fixed;
}<input type="text" id="demo" />
<input type="text" />本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句