css3 中斜杠

CSS3中的斜杠是一个非常有用的工具，可以用来创建各种有趣位置的效果。

/* 在文字中间添加斜杠 */
span {
    position: relative;
}
span::before {
    content: "/";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
span::after {
    content: "/";
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

/* 斜线背景 */
.container {
    background: linear-gradient(45deg,#f8b195,#f67280);
    background-size: 50%;
    background-repeat: no-repeat;
}

以上代码可以通过在文字中间添加斜杠来吸引读者的眼球，同时在容器背景中添加斜线，使整个页面看起来更加有趣。

斜线还可以用于设计中的分割线，让页面元素更加清晰明了。

/* 横向斜线分割线 */
hr {
    height: 0.5em;
    border: none;
    background: linear-gradient(45deg,#0f2027,#203a43,#2c5364);
}

以上代码可以在页面中添加一条横向的斜线，分隔不同部分，视觉效果非常出色。

总之，CSS3中的斜杠是一个非常强大的功能，可以用于许多有趣的效果，通过巧妙地运用，可以使页面设计更加出众。