我无法在菜单中设计漂亮的边框

问题描述 投票:0回答:1

我正在尝试添加带有切割的边框。然后我编写了代码,虽然做了所有的事情,但是却无法切入边框(like this)。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.box{
background-color:#fff;
border:none;
color:#000;
font-size:30px;
position:relative;
margin:22px;
}

.box::before {
content:'';
width:100%;
height:130%;
top:-10px;
right:0;
bottom:0;
left:-20px;
position:absolute;
border: 3px solid #36b4c2;
border-width:3px 3px 3px 3px;
}
</style>
</head>
<body>

<button class="box" > Menu </button><br><br>

</body>
</html>

我走错了路吗?还有其他标记可以添加带有切割的边框。

html css menu
1个回答
0
投票

添加z索引:-1;在:before选择器中

© www.soinside.com 2019 - 2024. All rights reserved.