CSS:如何在里面圆 Angular 盒子？

Question

<分区>

Answer 1

这可以通过在正常背景图像之上添加四个圆形“渐变”背景图像来完成，每个图像都位于适当的 Angular 落。有一个例子 on Lea Verou's blog .从中我提取了一个 JSFiddle ;关键代码是

.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 14px;
}