时间戳

首页 > 解决方案 > CSS中的装饰艺术风格边框

html - CSS中的装饰艺术风格边框

问题描述

我希望使用纯 CSS 来实现这种边框效果：

装饰艺术边框风格

我的偏好是在不添加额外 div 元素的情况下实现它。任何建议，将不胜感激

编辑：固定图像描述

标签： htmlcss

解决方案

你可以这样做：

.box {
  width:150px;
  height:200px;
  border:15px solid transparent; /* control the offset of the lines */
  outline:2px solid #000; /* adjust the 2px here */
  outline-offset:-10px; /* control the offset of the rectangle */
  background:
    linear-gradient(#000 0 0) top,
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) bottom,
    linear-gradient(#000 0 0) right;
  background-size:200% 2px,2px 200%; /* adjust the 2px here */
  background-origin:padding-box;
  background-repeat:no-repeat;
}
<div class="box"></div>

使用 CSS 变量轻松控制：

.box {
  --c:red;   /* color */
  --b:2px;   /* thickness of lines */
  --o1:15px; /* offest of lines*/
  --o2:10px; /* offset of rectangle */
  
  width:150px;
  height:200px;
  box-sizing:border-box;
  display:inline-block;
  border:var(--o1) solid transparent; 
  outline:var(--b) solid var(--c); 
  outline-offset:calc(-1*var(--o2));
  background:
    linear-gradient(var(--c) 0 0) top,
    linear-gradient(var(--c) 0 0) left,
    linear-gradient(var(--c) 0 0) bottom,
    linear-gradient(var(--c) 0 0) right;
  background-size:200% var(--b),var(--b) 200%; 
  background-origin:padding-box;
  background-repeat:no-repeat;
}
<div class="box"></div>
<div class="box" style="--c:green;--b:1px;--o1:20px;"></div>
<div class="box" style="--c:blue;--b:4px;--o1:40px;--o2:20px;"></div>
<div class="box" style="--c:#000;--b:1px;--o1:10px;--o2:0;"></div>

推荐阅读