使用CSS实现锯齿形边框的示例代码
<h2>前言</h2><p>不知道大伙有没有见过下面这种效果。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/202398115011275.jpg" /></p>
<p>没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可参考下面的图片。其实看到这种效果，相信很多人第一反应是采用伪元素的方式添加小三角形来实现锯齿状，确实是这样的，下面就带大家来实现它。</p>
<h2>效果预览</h2>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/202398115011276.jpg" /></p>
<h2>结构构建</h2>
<p><code>HTML</code>这一部分很简单，使用<code>html5</code>标签<code>section</code>包裹内容即可。</p>
<div class="jb51code"><pre class="brush:xhtml;"> <section>
<h2>Border</h2>
</section></pre></div>
<p><code>section</code>的作用是创建一个区块，通常用于组织和包容相关的内容，可以添加其他内容或样式来补充、装饰或定义该<code>section</code>区块的特性。</p>
<p>总的来说就是我们创建了一个<code>section</code>区块，其中包含了一个标题<code>Border</code>的二级标题。这个<code>section</code>可以用于组织相关的内容，并根据需要进行进一步的样式和布局设置。</p>
<h2>样式设计</h2>
<p><code>CSS</code>部分主要在<code>section</code>标签上做文章，我们先来定义<code>section</code>元素的样式。</p>
<div class="jb51code"><pre class="brush:css;">section{
position: relative;
width: 100%;
height: 100%;
background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);
background-blend-mode: soft-light;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
border-left: 50px solid #fff;
border-right: 50px solid #fff;
}</pre></div>
<p>我们将<code>section</code>元素定义为一个占满父元素、具有白色实线边框的容器。这个容器使用弹性布局，将子项在水平和垂直方向上都居中对齐。通过设置背景属性，可以添加自定义的背景样式，例如背景图片、背景混合模式等等。</p>
<p><code>background-blend-mode: soft-light</code>是用于设置背景的混合模式为 <strong>soft-light</strong>，这是一种混合模式用于调整背景与内容之间的颜色和明暗关系。</p>
<p>接下来就是最关键的部分了，利用伪元素实现锯齿状。</p>
<div class="jb51code"><pre class="brush:css;">section::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
display: block;
background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
background-size: 30px 60px;
}</pre></div>
<div class="jb51code"><pre class="brush:css;">section::after{
......
top: 0;
left: 0;
......
transform: rotate(180deg);
}</pre></div>
<p>这两段大部分内容是相同的，因此在这里我将由区别的部分拿出来讲一下。利用用<code>::before</code>和<code>::after</code>伪元素为<code>section</code>元素添加了棋盘状背景图案。通过两个线性渐变，其中透明色和白色的比例按照百分比来控制，创建出棋盘图案的效果。这样的样式可以用于装饰<code>section</code>元素，增加视觉效果和细节来提升整体的外观。</p>
<p>对于两者有区别的部分，<code>top: 0</code>和<code>left: 0</code>将伪元素相对于父元素的顶部和左侧边缘进行定位；<code>bottom: 0</code>和<code>left: 0</code>将伪元素相对于父元素的底部和左侧边缘进行定位。可以理解为两者将四边都占满了。<code>transform: rotate(180deg)</code>对伪元素应用旋转变换，将其旋转<strong>180</strong>度，即使它成为 <code><section></code> 元素背景的顶部。可以理解为默认为底部，通过转换之后变成顶部。</p>
<h2>完整代码</h2>
<p>html：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<section>
<h2>Border</h2>
</section>
</body>
</html></pre></div>
<p>css：</p>
<div class="jb51code"><pre class="brush:css;">*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100%;
background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);
background-blend-mode: soft-light;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
border-left: 50px solid #fff;
border-right: 50px solid #fff;
}
section h2{
color: #fff;
font-size: 20em;
text-align: center;
}
section::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
display: block;
background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
background-size: 30px 60px;
}
section::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
display: block;
background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
background-size: 30px 60px;
transform: rotate(180deg);
}</pre></div>
<h2>总结</h2>
<p>以上就是锯齿形状边框的实现过程了，整体实现并不难，代码也通俗易懂，建议多看几遍，然后实操一下。</p>
頁:
[1]