css 实现四角边框

最新推荐文章于 2024-04-30 09:57:08 发布

Webgiserin

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量509

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/Webgiser_yy/article/details/135690506

版权

css+dom 四角边框
 css 四角边框 border-image-source
css 四角边框 background
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box,.bgBox{
      position: relative;
      width:100px;
      height: 50px;
      top: 100px;
      margin: 0 auto;
      border: 1px solid #5384ff;
      display: flex;
      align-items: center;
    }
    .item{
      width: 100%;
      height: 100%;
      /*高，宽*/
      border-image-source:radial-gradient(51% 55%, transparent 0, transparent 100%, #1cd8ff 100%);
      /*border-image-source:radial-gradient(51% 55%, #00bb00 0, #ff80e1 100%, #1cd8ff 100%);*/
      border-image-slice:.5;
      border-width: 5px;
      border-style: solid;
      border-image-outset: 10px 15px;
    }
    /*设置颜色，宽度，和长度*/
    :root{
      --borderColor: #e61aff;
      --borderWidth:5px;
      --borderLength:20px
    }
    .bgBox{
      top: 200px;
      border: 1px solid #263805;
    }
    .bgItem{
      width: 100%;
      height: 100%;
      background: linear-gradient(to left,var(--borderColor),var(--borderColor)) left top no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat;
      background-size: var(--borderWidth) var(--borderLength), var(--borderLength) var(--borderWidth), var(--borderWidth) var(--borderLength), var(--borderLength) var(--borderWidth);
      /*border: 5px solid transparent;*/
    }
  </style>
</head>
<body>
<!-- border-image-source-->
<div class="box">
  <div class="item"></div>
</div>

<!--background-size-->
<div class="bgBox">
  <div class="bgItem"></div>
</div>
</body>
</html>