使用CSS實現(xiàn)鋸齒形邊框的示例代碼

發(fā)布時間：2023-09-08 11:58:31 作者：一條會coding的Shark

我要評論

今天給大伙帶來的是一個鋸齒形邊框，類似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，其實看到這種效果，相信很多人第一反應是采用偽元素的方式添加小三角形來實現(xiàn)鋸齒狀，確實是這樣的，下面就帶大家來實現(xiàn)它,

前言

不知道大伙有沒有見過下面這種效果。

沒錯，這回給大伙帶來的是一個鋸齒形邊框，類似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，具體效果可參考下面的圖片。其實看到這種效果，相信很多人第一反應是采用偽元素的方式添加小三角形來實現(xiàn)鋸齒狀，確實是這樣的，下面就帶大家來實現(xiàn)它。

效果預覽

結構構建

HTML這一部分很簡單，使用html5標簽section包裹內容即可。

 <section>
      <h2>Border</h2>
 </section>

section的作用是創(chuàng)建一個區(qū)塊，通常用于組織和包容相關的內容，可以添加其他內容或樣式來補充、裝飾或定義該section區(qū)塊的特性。

總的來說就是我們創(chuàng)建了一個section區(qū)塊，其中包含了一個標題Border的二級標題。這個section可以用于組織相關的內容，并根據(jù)需要進行進一步的樣式和布局設置。

樣式設計

CSS部分主要在section標簽上做文章，我們先來定義section元素的樣式。

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元素定義為一個占滿父元素、具有白色實線邊框的容器。這個容器使用彈性布局，將子項在水平和垂直方向上都居中對齊。通過設置背景屬性，可以添加自定義的背景樣式，例如背景圖片、背景混合模式等等。

background-blend-mode: soft-light是用于設置背景的混合模式為 soft-light，這是一種混合模式用于調整背景與內容之間的顏色和明暗關系。

接下來就是最關鍵的部分了，利用偽元素實現(xiàn)鋸齒狀。

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{
   ......
    top: 0;
    left: 0;
   ......
    transform: rotate(180deg);
}

這兩段大部分內容是相同的，因此在這里我將由區(qū)別的部分拿出來講一下。利用用::before和::after偽元素為section元素添加了棋盤狀背景圖案。通過兩個線性漸變，其中透明色和白色的比例按照百分比來控制，創(chuàng)建出棋盤圖案的效果。這樣的樣式可以用于裝飾section元素，增加視覺效果和細節(jié)來提升整體的外觀。

對于兩者有區(qū)別的部分，top: 0和left: 0將偽元素相對于父元素的頂部和左側邊緣進行定位；bottom: 0和left: 0將偽元素相對于父元素的底部和左側邊緣進行定位?？梢岳斫鉃閮烧邔⑺倪叾颊紳M了。transform: rotate(180deg)對偽元素應用旋轉變換，將其旋轉180度，即使它成為 <section> 元素背景的頂部。可以理解為默認為底部，通過轉換之后變成頂部。

完整代碼

html：

<!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>

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);
}