如何使用 CSS 达到这个效果

14569

元素：.Dropdown-menu
想要的效果：

我的代码：

.Dropdown-menu {
    border-top: 2px solid @primary-color;
    border-radius: 10px;
    padding: 1px;
    &>li {
        margin: 4px;
        &>a, &>button, &>span {
            border-radius: 8px;
        }
    }
}

目前的问题：这个圆角影响了顶部的蓝色，但又不能去除圆角。

丰仔

这样其实也还行，要改的话外边套一个元素加边框就可以了

14569

#2 丰仔咋改啊，我开发 Flarum 主题只能用自定义 Less/CSS。

James

我觉得下边的好看一些。要实现上面的效果，可能要用两个层实现。

丰仔

#4 14569 那加个before伪元素看看吧，flarum主题真的是不好写，开放性不高

小鱼飘飘

塞一个伪元素，外层overflow hidden+position relative。伪元素绝对定位到顶上就可以了

14569

#6 丰仔就是怎么加

.Dropdown-menu:before {
    border-top: 2px solid @primary-color:
}

毛用没有

小鱼飘飘

#7 14569 .Dropdown-menu:before {
border-top: 2px solid @primary-color:
}

编辑：伪元素需要设置content属性，抱歉

伪元素用块元素和background

.Dropdown-menu:before {
    content: " ";
    background: @primary-color;
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:5px;/*脚填的，你看看多少高度*/
}

然后要求父元素

...{
    overflow: hidden;
    position:relative;/*或absolute|fixed，有独立定位上下文就行*/
}

14569

#8 小鱼飘飘我改了一下，可以了。

dami

真是个完美主义者啊