Html 如何创建带有偏移边框线的双色边框

  <div class="apps-card">
    <div class="card-body">
    </div>
  </div>

    .apps-card {
    height: 300px;
    width: 250px;
    position: relative;
    overflow: hidden;
    margin-left: 200px;
    margin-top: 200px;
    background: rgb(2,0,36);
    background: linear-gradient(129.8deg, purple 50%, rgba(9,121,120,1) 50%);
    
    .card-body {
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 4px;
        top: 4px;
        background-color: #fff;
    }
}

.box {
  --o: 25px; /* the offset */
  
  width: 300px;
  height: 200px;
  border: 1px solid #0000;
  box-sizing: border-box;
  background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient( 90deg, blue calc(var(--o) + 1px),red 0) 
     100% 0 / calc(100% + var(--o)) 51% border-box,
    linear-gradient(-90deg, red calc(var(--o) + 1px),blue 0) 
     0 100% / calc(100% + var(--o)) 51% border-box;
  background-repeat: no-repeat;
  transition: .3s;
}

.box:hover {
  border-width: 4px;
  background-position: 0 0, 0 0,100% 100%;
}

<div class="box"></div>

Html相关问答推荐

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

在CSS中不保持圆形图像形状的边框半径属性

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

Angular /HTML5不会播放本地文件夹中的音频mpeg

在css中，如何在英雄版块的标题后面做一个粘性的导航栏？

OnChange函数未在下拉列表中使用一个选项触发

元素offsetTop在滚动容器中时没有更改

在移动屏幕上显示时分支树视图的响应能力问题

Swift WkMessageHandler 消息不发送

网格中的图像zoom 不正确

文本不显示在 div 下方

并排对齐两个文本区域列

CSS "overflow"不能显示整个单词

使用flex wrap时，如何设置另一个元素的宽度与换行后的元素对齐？

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ？

如何并排放置部分？

W3Schools 幻灯片相同高度

在包含 html 标签的字符串的子字符串中应用不同的样式

如何在Bootstrap卡片底部添加波浪形状

提交前的验证表单未显示任何验证消息？