我注意到旋转时 CSS 边框图像中有轻微的可见中断。有没有办法阻止这种或另一种方法来实现相同的解决方案?
.box {
margin: 150px;
width: 250px;
height: 250px;
background: lightGray;
border: 20px solid blue;
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
}
.r45 {
transform: rotate(-45deg);
color: red;
}
<div class="box">
<p class="r45">Hello</p>
</div>
最佳答案
实现相同解决方案的另一种方法是使用 pseudo:after
,如下面的工作示例所示,希望它有所帮助:)
.box {
margin: 150px;
width: 250px;
height: 250px;
background: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.box:after {
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
content: '';
background: lightGray;
position: absolute;
}
.r45 {
transform: rotate(-45deg);
color: red;
position: relative;
z-index: 1;
}
<div class="box">
<p class="r45">Hello</p>
</div>
关于html - Css Rotate 45 导致渐变边框中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52246520/