我有一个带有 background-image: linear-gradient( to bottom, red, blue);
的 div
但我想要 to bottom
成为 to center
但它不起作用。
赖特,现在看起来像这样
我希望它看起来像这样
有谁知道如何做到这一点请帮助我?
最佳答案
你展示的是一个经典的边框:
.box {
border:40px solid blue;
height:50px;
width:50px;
background:red;
}
<div class="box"></div>
但我怀疑您想要褪色,所以您想要的是
radial-gradient
.box {
height:200px;
width:200px;
background:radial-gradient(farthest-side,red,blue);
}
<div class="box"></div>
或者像下面这样:
.box {
height: 200px;
width: 200px;
background: linear-gradient(to right, blue, red, blue);
position: relative;
}
.box::before {
content: "";
display: block;
height: 100%;
background: linear-gradient(blue, red, blue);
clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
}
<div class="box"></div>
或者像这样:
.box {
height: 200px;
width: 200px;
background:
linear-gradient(to top right , red, blue) top right,
linear-gradient(to top left , red, blue) top left ,
linear-gradient(to bottom left , red, blue) bottom left,
linear-gradient(to bottom right, red, blue) bottom right;
background-size:50% 50%;
background-repeat:no-repeat;
}
<div class="box"></div>
还使用
box-shadow
.box {
height: 200px;
width: 200px;
background: red;
box-shadow: 0 0 50px 35px blue inset;
}
<div class="box"></div>
关于html - 你能有背景图片 : linear-gradient( to center. ..);,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65623383/