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

css解决边框四个角有颜色

news 来源：原创 2025/4/22 14:16:49

效果
在这里插入图片描述

html

<div class="gradient-corner">2021年</div>

css


  background:
    /* 左上角横线 */
    linear-gradient(90deg, rgb(5, 150, 247) 9px, transparent 0) 0 0,
    /* 左上角竖线 */
    linear-gradient(0deg, rgb(5, 150, 247) 9px, transparent 0) 0 0,
    /* 右上角横线 */
    linear-gradient(90deg, transparent calc(100% - 9px), rgb(5, 150, 247) 0) 100% 0,
    /* 右上角竖线 */
    linear-gradient(0deg, rgb(5, 150, 247) 9px, transparent 0) 100% 0,
    /* 左下角横线 */
    linear-gradient(90deg, rgb(5, 150, 247) 9px, transparent 0) 0 100%,
    /* 左下角竖线 */
    linear-gradient(0deg, transparent calc(100% - 9px), rgb(5, 150, 247) 0) 0 100%,
    /* 右下角横线 */
    linear-gradient(90deg, transparent calc(100% - 9px), rgb(5, 150, 247) 0) 100% 100%,
    /* 右下角竖线 */
    linear-gradient(0deg, transparent calc(100% - 9px), rgb(5, 150, 247) 0) 100% 100%;

  background-size: 10px 2px, 2px 27px;    //横线的长度    横线宽度   竖线宽度  竖线长度

  background-repeat: no-repeat;
  background-color: rgb(32 48 70 / 67%);  //这个必须放在后面