本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

使用CSS实现锯齿形边框的代码

css 来源：互联网 作者：佚名 发布时间：2023-09-10 22:31:17 人浏览
摘要

不知道大伙有没有见过下面这种效果。 没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可参考下面的图片。其实看到这种效果，相信很

不知道大伙有没有见过下面这种效果。

没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可参考下面的图片。其实看到这种效果，相信很多人第一反应是采用伪元素的方式添加小三角形来实现锯齿状，确实是这样的，下面就带大家来实现它。

效果预览

结构构建

HTML这一部分很简单，使用html5标签section包裹内容即可。

1

2

3

<section>

     <h2>Border</h2>

</section>

section的作用是创建一个区块，通常用于组织和包容相关的内容，可以添加其他内容或样式来补充、装饰或定义该section区块的特性。

总的来说就是我们创建了一个section区块，其中包含了一个标题Border的二级标题。这个section可以用于组织相关的内容，并根据需要进行进一步的样式和布局设置。

样式设计

CSS部分主要在section标签上做文章，我们先来定义section元素的样式。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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，这是一种混合模式用于调整背景与内容之间的颜色和明暗关系。

接下来就是最关键的部分了，利用伪元素实现锯齿状。

1

2

3

4

5

6

7

8

9

10

11

12

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;

}

1

2

3

4

5

6

7

section::after{

   ......

    top: 0;

    left: 0;

   ......

    transform: rotate(180deg);

}

这两段大部分内容是相同的，因此在这里我将由区别的部分拿出来讲一下。利用用::before和::after伪元素为section元素添加了棋盘状背景图案。通过两个线性渐变，其中透明色和白色的比例按照百分比来控制，创建出棋盘图案的效果。这样的样式可以用于装饰section元素，增加视觉效果和细节来提升整体的外观。

对于两者有区别的部分，top: 0和left: 0将伪元素相对于父元素的顶部和左侧边缘进行定位；bottom: 0和left: 0将伪元素相对于父元素的底部和左侧边缘进行定位。可以理解为两者将四边都占满了。transform: rotate(180deg)对伪元素应用旋转变换，将其旋转180度，即使它成为 <section> 元素背景的顶部。可以理解为默认为底部，通过转换之后变成顶部。

完整代码

html：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

*{

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

}

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • CSS实现元素水平垂直居中的几种方法解释
    1. 使用Flexbox布局 Flexbox是CSS的强大布局模型，它为我们提供了简单而灵活的方法来实现元素的水平和垂直居中。 1 2 3 4 5 6 html复制代码 div

  • 使用CSS实现锯齿形边框的代码

    使用CSS实现锯齿形边框的代码
    不知道大伙有没有见过下面这种效果。 没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可
  • css中div盒子height:100%高度无效解决办法介绍
    一、flex布局情况下 1、在父元素设置一个固定px高度例如height: 500px 2、在子元素设置height: auto 那么为什么height: 100%不生效呢？ 原因是flex布局

  • Grid中的repeat函数使用示例介绍

    Grid中的repeat函数使用示例介绍
    在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布

  • Anchor Positioning锚点定位功能抢先体验

    Anchor Positioning锚点定位功能抢先体验
    本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为锚点定位。 Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复

  • CSS3实现双圆角Tab菜单的详细介绍

    CSS3实现双圆角Tab菜单的详细介绍
    效果图 分析 一个带圆角的矩形 + 左右对称的不规则图形（一个小矩形分别去掉一个圆角），利用伪元素::before::after和box-shadow阴影实现。 代
  • CSS设置背景颜色透明的两种方法介绍
    1，通过background和opacity设置背景颜色透明 background属性中属性值比较简单，所以我们简单看看opacity属性 opacity属性参数的不透明度是以数字表
  • CSS颜色混合的五种实现方式介绍
    如果出现一种颜色就定义一个变量，每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢？在这里也就是，如何将一个颜色变
  • CSS3中的box-flex弹性盒属性布局介绍
    box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局

  • JS/CSS压缩工具(YUI Compressor)使用方法

    JS/CSS压缩工具(YUI Compressor)使用方法
    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具，采用Java开发。方便快捷，压缩后的代码文件体积小，有效率高，当然市面上不乏有很多压
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计