如何为激活状态下的DevExpress Blazor DxTabPage添加带四角圆角的底部边框

我明白你现在碰到的问题了——想给激活状态的DxTabPage加上一个底部带四角圆角的白色边框，但之前的CSS写法只让底部两个角落出现了圆角，完全达不到你想要的效果。咱们来调整一下CSS，用更灵活的方式实现这个需求。

问题根源分析 #

你之前直接给激活的.dxbl-tabs-item元素添加border-bottom和border-radius，但因为只有底部边框存在，border-radius只会作用在底部的两个边角上，顶部两个角没有边框，自然不会显示圆角。要实现四角都带圆角的底部边框，咱们可以用伪元素来模拟这个边框条，这样就能完全控制它的形状了。

解决方案代码 #

替换你原来的CSS，改用下面这段代码：

/* 重置激活Tab的基础样式，为伪元素定位做准备 */
.dxbl-tabs .dxbl-tabs-item.dxbl-active:not(.dxbl-disabled):not(:disabled) {
    font-weight: 600 !important;
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    position: relative; /* 让伪元素以这个元素为基准定位 */
}

/* 用伪元素创建带圆角的底部边框 */
.dxbl-tabs .dxbl-tabs-item.dxbl-active:not(.dxbl-disabled):not(:disabled)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: white;
    border-radius: 2px; /* 这里的圆角会作用在整个边框条的四个角 */
}

额外调整建议 #

如果你不想让边框条完全撑满Tab的宽度，可以给伪元素添加左右边距，比如：

.dxbl-tabs .dxbl-tabs-item.dxbl-active:not(.dxbl-disabled):not(:disabled)::after {
    /* 保留其他属性 */
    left: 6px;
    right: 6px;
}

这样边框就会和你Tab上设置的mx-[6px]边距对齐，视觉上更协调。

你的Razor页面代码可以保持不变，只需要替换CSS部分就能看到效果啦。

备注：内容来源于stack exchange，提问作者Lucas Mikó