css 实现四个角加粗

最新推荐文章于 2023-07-13 19:36:29 发布

柑子~

最新推荐文章于 2023-07-13 19:36:29 发布

阅读量725

点赞数 2

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/apppws/article/details/125599293

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html部分

<div class="border_style">
      <div class="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div>
        </div>
      </div>
    </div>

css部分

<style lang="scss" scoped>
.border_style {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 10px;

  .main {
    position: relative;
    width: 400px;
    height: 200px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a6495;
    box-shadow: #0f4477 0px 0px 1px 1px;
    b {
      display: block;
    }

    span {
      &:nth-child(1) {
        position: absolute;
        left: -5px;
        top: -5px;
        padding: 10px;
        border-style: solid;
        border-color: #02cde6;
        border-width: 5px 0 0 5px;
      }

      &:nth-child(2) {
        position: absolute;
        right: -5px;
        top: -5px;
        padding: 10px;
        border-style: solid;
        border-color: #02cde6;
        border-width: 5px 5px 0 0;
      }

      &:nth-child(3) {
        position: absolute;
        right: -5px;
        bottom: -5px;
        padding: 10px;
        border-style: solid;
        border-color: #02cde6;
        border-width: 0 5px 5px 0;
      }

      &:nth-child(4) {
        position: absolute;
        left: -5px;
        bottom: -5px;
        padding: 10px;
        border-style: solid;
        border-color: #02cde6;
        border-width: 0 0 5px 5px;
      }
    }
  }
}
</style>