最佳答案
这篇文章 hand-drawn borders给出了一个很好的例子,通过使用大椭圆圆 Angular (通过 CSS border-radius 属性)仅使用 CSS 在按钮上实现这种效果。它可能不适用于大型 div
元素。
文章改编的例子:
button {
background:transparent;
padding:0.5rem 0.5rem;
margin:0 0.5rem;
font-size:1rem;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
border-bottom-right-radius: 225px 15px;
border-bottom-left-radius:15px 255px;
}
button:hover{
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
button.lined.thick{
border:solid 3px #41403E;
}
button.dotted.thick{
border:dotted 3px #41403E;
}
button.dashed.thick{
border:dashed 3px #41403E;
}
button.lined.thin{
border:solid 2px #41403E;
}
button.dotted.thin{
border:dotted 2px #41403E;
}
button.dashed.thin{
border:dashed 2px #41403E;
}
<button class='lined thick'>Lined Thick</button>
<button class='dotted thick'>Dotted Thick</button>
<button class='dashed thick'>Dashed Thick</button>
<div> </div>
<button class='lined thin'>Lined Thin</button>
<button class='dotted thin'>Dotted Thin</button>
<button class='dashed thin'>Dashed Thin</button>
关于css - 我可以使用 CSS 扭曲边框,使它们看起来像素描吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43694588/