如何从角落删除边框的某些部分?

本文介绍了如何从角落删除边框的某些部分?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要删除像这样的边框的角.

I want to remove the corners of borders like this picture.

推荐答案

您可以使用 :: before 和 :: after 伪元素来覆盖(因此，隐藏")边框的一部分:

You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:

.bordery {
  border: 1px solid teal;
  padding: 20px;
  position: relative;
}
.bordery::after,
.bordery::before {
  background-color: white;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.bordery::after {
  bottom: -1px;
  right: -1px;
}
.bordery::before {
  top: -1px;
  left: -1px;
}

<div class="bordery">This is just some sample content.</div>

这篇关于如何从角落删除边框的某些部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！