时间戳

首页 > 解决方案 > 我无法在菜单中设计漂亮的边框

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

问题描述

我正在尝试添加带有切割的边框。我编写了它的代码，我做了所有的事情，但无法切入边界（像这样）。

<!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>

我是不是走错了路。是否有任何其他标签可以添加带有切割的边框。

标签： htmlcssmenu

解决方案

添加z-index：-1；在 :before 选择器之前

推荐阅读