CSS:div Angular 上的点

Question

我想在容器的每个 Angular 上放一个点。我认为这个技巧是 .my-container:before 和设置 :before 的边框或背景属性的组合。我想要的效果类似于SO#17306087 ，但我不想使用图像。

编辑

jsfiddle

我会经常使用它，所以我希望它能通过 css 类自动发生(不需要额外的 DOM 元素)。

编辑

由于 svg 是基于文本的并且可以直接插入到 css 中，所以我正在研究该方法。我在这里看到这确实有效:example fiddle

my updated fiddle (目前有一个我试图查明的 css 错误) fixed fiddle with 4 dots using background prop

svg 是有效的并且不会像 DOM 一样抛出错误:fiddle

Answer 1

您只能在 div 上使用标准 CSS 来实现。

诀窍是使用伪元素使用径向渐变显示 2 个圆圈。

.test1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: absolute;
    left: 220px;
}

.test1:before, .test1:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 20px;
    top: 0px;
    background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
    background-size: 20px 20px;
    background-position: top center, bottom center;
    background-repeat: no-repeat;
}

.test1:before {
    left: 0px;
}
.test1:after {
    right: 0px;
}

fiddle

您也可以在元素本身中绘制圆圈，但您不能将其应用于具有背景的元素。

上面的代码渲染了圆圈像素化。最好为红色/透明过渡保留 1 个像素

    background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);

updated fiddle