【CSS练习】如何用纯 CSS 创作一个容器厚条纹边框特效

image.png

知识点

1. linear-gradient()
   用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

2. background-size
   设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

• cover
  缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
• contain
  缩放背景图片以完全装入背景区，可能背景区部分空白。

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

3. box-shadow
   由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 0 0 2px deeppink,
                0 0 5px rgba(0, 0, 0, 1),
                inset 0 0 5px rgba(0, 0, 0, 1);
                border-radius: 10px;

• inset
  不使用inset，默认阴影在边框外，即阴影向外扩散。
  使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。

4.background-position
为每一个背景图片设置初始位置。

• center，用来居中背景图片。
• 关键字 top, left, bottom, right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。
• <length> 或 <percentage>。指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。

            @keyframes animate {
                from {
                    background-position: 0;
                }
                to {
                    background-position: 0 450px;
                }
            }

---

代码

<style type="text/css">
            html, body {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                background-color: pink;
            }
            .strip {
                width: 300px;
                height: 300px;
                box-sizing: border-box;
                padding: 15px;
                position: relative;
                overflow: hidden;
            }
            .strip::before {
                content: '';
                position: absolute;
                background: repeating-linear-gradient(
                    white 0%,
                    white 7.5px,
                    hotpink 7.5px,
                    hotpink 15px,
                    white 15px,
                    white 22.5px,
                    hotpink 22.5px,
                    hotpink 30px
                );
                width: 150%;
                height: 150%;
                transform: translate(-20%) translateY(-20%) rotate(-45deg);
                animation: animate 20s linear infinite;
            }
            .strip #content{
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                flex-direction: column;
                background-color: white;
                box-sizing: border-box;
                text-align: center;
                font-family: sans-serif;
                padding: 30px;
                z-index: 2;
            }
            .strip, .strip #content {
                box-shadow: 0 0 2px deeppink,
                0 0 5px rgba(0, 0, 0, 1),
                inset 0 0 5px rgba(0, 0, 0, 1);
                border-radius: 10px;
            }
            h2 {
                color: deeppink;
            }
            p {
                color: dimgray;
            }
            @keyframes animate {
                from {
                    background-position: 0;
                }
                to {
                    background-position: 0 450px;
                }
            }
        </style>

参考：https://segmentfault.com/a/1190000014576519