Question

我想了解是否可以通过CSS代码开发类似于显示here的边框模式。我考虑通过类似Photoshop的程序制作图案，然后将边框的背景设置为photoshop制作的图案的网址。如果我希望通过编码来解决这个问题，我是如何遇到浏览器兼容性问题的？

Answer 1

能够使用直接css制作非常相似的边框。

首先，在之前，生成一个有3条条纹线的盒子 - 一条红色，一条蓝色，一条米色。还添加了米色边框。

然后，在：after伪元素之后，只给了盒子一个米色背景（也许用渐变背景可能看起来更好）。

检查出来：

<!DOCTYPE html>
<html>
<head>
<style>

p.box:before{
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:repeating-linear-gradient(
    45deg,
    hsl(60, 56%, 81%) 0px,
    hsl(60, 56%, 81%) 4px,
    red 5px,
    red 14px,
    hsl(60, 56%, 81%) 15px,
    hsl(60, 56%, 81%) 20px,
    hsla(247, 83%, 37%, 1) 21px,
    hsla(247, 83%, 37%, 1) 30px
  ),
  linear-gradient(
    to bottom,
    rgba(48, 26, 255, 1),
    rgba(85, 66, 255, 1) 
  );
  border: 5px solid hsl(60, 56%, 81%);
}

p.box:after{
  content: '';
  position: absolute;
  right: -.5%;
  bottom: -2.5%;
  background: hsl(60, 56%, 81%);
  z-index: -1;
  height: 97%;
  width: 97%;
}

</style>
</head>
<body>

<p class="box"></p>

</body>
</html>

CSS平行四边形切割边框图案

1 个答案: