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

o8x7eapl 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(126)

我想为卡片创建如下边框：

卡悬停时的边框：

下面是我的代码示例：

<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;
    }
}

但我注意到：如果我改变了卡片的宽度-边框不适合卡片，并且位置错误。如何创建一个响应边框或任何其他方法来创建一个像悬停转换图像中的边框？

css

来源：https://stackoverflow.com/questions/75139656/how-do-i-create-a-two-color-border-with-offset-border-lines

1条答案

按热度按时间

nszi6y051#

下面是一个使用多个背景的想法：

.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>

赞(0）回复(0）举报 2023-01-18

我来回答

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

1条答案

相关问题

热门标签

最新问答