css实现斜纹图案边框效果代码-html代码-BFW代码库

css实现斜纹图案边框效果代码

代码语言：html

代码描述：css实现斜纹图案边框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html, body {
          height: 100%;
        }
        
        body {
          display: grid;
          place-items: center;
          font: 400 100%/1.5 sans-serif;
        }
        
        .section {
          max-width: 25rem;
          margin: 2rem;
        }
        .section__title {
          font-size: 2rem;
          margin-bottom: 0.5em;
        }
        .section__text {
          font-size: 1.15rem;
        }
        .section--background {
          position: relative;
          background: white;
          padding: 2rem 1rem;
        }
        .section--background::before {
          content: "";
          position: absolute;
          top: -1rem;
          left: -1rem;
          display: block;
          background-color: #ffffff;
          background-image: linear-gradient(45deg, transparent 49%, #aaaaff 50%, transparent 51%);
          background-size: 5px 5px;
          right: -1rem;
          bottom: -1rem;
          z-index: -1;
        }
        .section--border {
          padding: 2rem 1rem;
          border: 1rem solid #aaaaff;
          -o-border-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #aaaaff 6px, #aaaaff 15px, transparent 16px, transparent 20px) 20/1rem;
             border-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #aaaaff 6px, #aaaaff 15px, transparent 16px, transparent 20px) 20/1rem;
        }
    </style>


</head>

<body>
    <section class=.........完整代码请登录后点击上方下载按钮下载查看