当前位置：首页 > article >正文

div加4个角边框 css

article 2025/1/4 19:19:49

效果：

:root {
  --corner-color: #4ba7f5;
}
.data-item {
          position: relative;
          width: 100px;
          height: 60px;
          overflow: hidden;
          background: linear-gradient(to left, var(--corner-color), var(--corner-color)) left top no-repeat,
            linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left top no-repeat,
            linear-gradient(to left, var(--corner-color), var(--corner-color)) right top no-repeat,
            linear-gradient(to bottom, var(--corner-color), var(--corner-color)) right top no-repeat,
            linear-gradient(to left, var(--corner-color), var(--corner-color)) left bottom no-repeat,
            linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left bottom no-repeat,
            linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat,
            linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat;
          background-size: 1px 6px, 6px 1px, 1px 6px, 6px 1px;
          background-color: rgba($color: #3d87f5, $alpha: 0.1);
        }

查看全文

http://www.kler.cn/a/394085.html