css - 带有 border-radius 的表格上的虚线边框

Question

我有一张底部带有圆 Angular 的 table ，创建时使用:

border-bottom-left-radius:pixel;  

右下角也一样。

当我添加:

bottom-border-dotted; 
border-bottom-color:white; 

白色虚线边框显示正确(圆形)，但表格底部恢复为矩形。我在这张表中有纯色背景。当我将 bottom-border-dotted 替换为 border-bottom-solid 时，使用相同的白色，一切都很好。

我就是喜欢虚线边框，尤其是在圣诞节。

Answer 1

我认为您的 CSS 有一些错误。 F.e.: bottom-border-dotted; 不是有效的 CSS。您应该使用 border-bottom: 3px dotted black; 或 border-bottom-style: dotted;。

试试这个例子(见 JSFiddle )

HTML

<div></div>

CSS

div {
    display: inline-block;
    width: 300px;
    height: 300px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: solid 3px black;
    background-color: #cccccc;
    border-bottom: 3px dotted black;
}

结果

上面的代码会创建这样的东西: