css - 散列边框的纯 CSS 设计

Question

是否可以在不使用图像但仅使用 CSS 的情况下进行这样的设计（边缘）？

我们的一位设计师向我解雇了它，我认为它可能是一个 Photoshop 边框，但我想尽可能避免使用图像。

提前感谢您的任何提示！

Answer 1

是的你可以！具有惊人的css3 模式

这对你来说是一个粗略的演示。

HTML：

<div class='pat-ho' ></div>
<div class='pat-ve' ></div>
<div class='text' >Text Text Text</div>

CSS：

    .pat-ho {
        position: absolute;
        width:500px; height:500px;
        background-color: gray;
        background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
        background-size: 20px 20px;
    }
    .pat-ve {
        position: absolute;
        width:450px; height:500px;
        background-color: gray;
        background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
        background-size: 20px 20px;
        left: 25px
    }
    .text {
        position: absolute;
        width: 470px;
        height: 470px;
        background: white;
        top: 25px; left: 25px;
    }

更新：这是Austin Pray提供的更准确的演示。

Answer 2

对于仅用于框架的图像，您可以使用以下代码：DEMO

#frame
{
   border: 20px;
   border-image: url("http://ohhs.ohsd.net/~brick/sci/images/20_20.gif") 27 round stretch;
   border-image-width: 15px; 
   background-color:lightgray;
}