整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

现代CSS:创建 CSS 双边框的 6 种实现方案

常开发中,单边框的样式实现已经家常便饭了,边框属性常用的有 border-colorborder-styleborder-widthborder-colorborder-width 指定了边框的颜色和宽度,border-style 指定了边框是实心、虚线、双线还是其他样式。今天和大家一起探讨使用 CSS 创建双边框的几种实现方案。

1.创建页面框架

通过 html:5(div.box.box-$>h2{box $})*6 快速创建页面框架,通过 flex 布局让容器排列美观,并给每个容器设置不同的颜色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box box-1">
      <h2>box 1</h2>
    </div>
    <div class="box box-2">
      <h2>box 2</h2>
    </div>
    <div class="box box-3">
      <h2>box 3</h2>
    </div>
    <div class="box box-4">
      <h2>box 4</h2>
    </div>
    <div class="box box-5">
      <h2>box 5</h2>
    </div>
    <div class="box box-6">
      <h2>box 6</h2>
    </div>
  </body>
</html>

2.增加基础样式

body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 15px;
}
.box {
  width: 300px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  &.box-1 {
    background-color: green;
  }
  &.box-2 {
    background-color: rebeccapurple;
  }
  &.box-3 {
    background-color: brown;
  }
  &.box-4 {
    background-color: yellow;
  }
  &.box-5 {
    background-color: violet;
  }
  &.box-6 {
    background-color: aqua;
  }
}

初始效果如下:

1.使用 border-style 属性

我们使用 border-style 属性在 .box-1 上创建双边框效果。border-style 的可取值有很多,使用 border-style: double 创建双边框是最常规的方法。

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

我们给 .box-1 元素增加以下样式:

.box-1 {
  border-width: 15px;
  border-color: red;
  border-style: double;
}

通过 border-style CSS 属性,我们可以在方框的四边设置元素的线条样式。该属性可分配多个关键字值。

要创建双边框,可使用 double 关键字值。这会自动在两条边框线之间创建填充。我们还可以使用 border-[top/right/bottom/left] 在元素的特定边上创建双边框样式。

2.使用 outline 属性

我们使用 outline 属性在 .box-2 上创建双边框效果。outlineborder 类似,但 outline 不会占用任何空间,因为它们是在元素内容之外绘制的,此外,边框则提供了更多的样式选项。例如,每条边框线都可以使用不同的颜色。

要使用 outline 属性实现双边框效果,我们需要使用一个边框和一个轮廓。不过,与 border-style 属性不同,outline 属性不会自动在自身和边框之间创建空隙。要在轮廓和边框之间添加空隙,我们需要使用 outline-offset 属性。

我们在 .box-2 上使用 outline 属性:

.box-2 {
  border: 5px solid #f00; 
  outline: 5px solid #00f;
  outline-offset: -10px;
}

如上代码所示,outline-offset 属性可用于向内调整轮廓(例如设置负值,如 -20px)或向外调整轮廓(例如设置正值,如 5px)。在这里,我们使用了负的轮廓偏移来向内调整蓝色轮廓,使红色边框看起来像是外部的双边框

3.使用 ::before 或 ::after 伪元素

我们使用 ::before 伪元素在 .box-3 上创建双边框效果,使用 CSS 伪元素创建双边框也比较简单,即通过定位将 ::before 伪元素添加辅助边框:

.box-3 {
  position: relative;
  border: 5px solid #00f;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid green;
  }
}

使用 border 属性在方框上方创建了一个蓝色外部边框。同时将绿色内部边框设置为绝对定位,并使用顶部、左侧、底部和右侧值对其进行定位,流出间隙。

4.使用 box-shadow 属性

我们使用 box-shadow 属性在 .box-4 上创建双边框效果。通过使用两个逗号分隔的阴影,将偏移和模糊设置为零,并赋予每个阴影适当的大小,就可以使盒状阴影看起来像双边框:

.box-4 {
  width: 280px;
  height: 130px;
  margin: 10px;
  box-shadow:
    0 0 0 5px red,
    0 0 0 10px green;
}

在本例中,第二个(绿色)阴影是第一个(红色)阴影的两倍,但由于它们重叠在一起,所以看起来大小相同。还有个区别是 box-shadow 会变向改变容器的视觉尺寸,这里为了和其他盒子对齐,手动对盒子的宽高和外边距进行了干预。

5.使用 background-clip 属性

我们使用 background-clip 属性在 .box-5 元素上创建双边框效果:

.box-5 {
  border: 5px solid red;
  padding: 5px;
  background-clip: content-box;
}

我们使用 CSS background-clip 属性使方框元素的背景仅填充 content-box 区域。这样就在内容框周围产生了间距,看起来就像有了一个白色边框。加上元素的常规边框就有点像双边框了。

效果如下:

6.使用 linear-gradient() 函数

我们使用 linear-gradient() 函数在 .box-6 上创建一个双边框。该函数可用于沿直线在两种或多种颜色之间产生渐变过渡。在本例中,我们首先给 .box-6 元素设置 5px 宽的绿色边框。然后,在背景属性中为每一侧设置线性渐变:

.box-6 {
  border: 5px solid #f00;
  background: 
    linear-gradient(to top, #00f 5px, transparent 1px),
    linear-gradient(to bottom, #00f 5px, transparent 1px), 
    linear-gradient(to left, #00f 5px, transparent 1px), 
    linear-gradient(to right, #00f 5px, transparent 1px);
}

效果如下:

整体效果:



种分割线Html代码


一、基本线条:

1、<HR>


2、align线条位置(可选left、right、center);width线条长度;color颜色;size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>


二、特效(效果并不是孤立的,可相互组合)


1、两头渐变透明:

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、纺锤形:

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右边渐变透明:

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左边渐变透明:

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虚线:

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、双线:

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立体效果:

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、钢针效果:

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

9.垂直分割线

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">


虚线的Html代码

HTML代码:

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部选择提示:你可先修改部分代码,再按运行]

Word 里大家会怎么画直线或底线呢?千万不要再用一堆「-」号组成,也不要用空白键+ 底线的方式了。其实 Word 有内建非常方便的画线方式,只要几个步骤,无论是单横线、双横线、虚线、波浪线、分隔线等等都没有问题。

不过,Word 这种画线的方式有个不易删除的缺点,小编教大家如何删除,以及不小心画出直线后该如何避免再次启用这工能。

Word 画线方法:底线、虚线都可以这样画

在微软office Word 里面画线的方法意外地简单,大家现在可以打开Word 试试看(Windows/Mac 版皆可),在空白处打三个「=」并按下Enter 输入键,就会自动生成双底线了。

单行横线或底线也是一样的方法,打三个「-」并按下Enter 确认键,就会生成一条的底线。

所有Word 的横线指令如下:

双横线

横线(底线)

波浪线

虚线

分隔线

画出来的效果如下:

至于使用的方法也很容易理解,像是「=」这符号本身就是双横线、「-」就是一条横线、「~」就是波浪线,这些都很直觉;至于「*」打出来其实也很像虚线,要记的只有「三个#」这指令。

如何删除Word 生成的直线?

如果大家有尝试了上面这种输入底线的方式,会发现居然没办法直接用 Delete 或删除键把它删除。如果经常不小心画出这种横线,要怎么把它删掉呢?或是关闭自动生成画线的快捷键,避免以后不小心误用。

首先,在刚打出直线之后,可以看到旁边有一个闪电符号;这个闪电符号过一阵子或是进行其他指令后就会消失,所以如果要取消横线,可以先趁闪电符号还在的时候按下去:

这时就可以点「复原框线线条」,就可以把刚刚产生的横线删除了。(这一系列横线的官方名称就叫做「框线线条」);如果要关掉「三个– 加enter」之类的快速键,也可以点下方的「停止自动建立框线」:

删除过后的横线,就会变成原本输入的「三个等于」或「三个减号」,不会再产生横线了。

如果没有闪掉符号了怎么删除线条?

如果已经没了闪电符号,要怎么把刚刚产生的底线删除呢?首先,先让鼠标位于「横线上一段的最前面」:

然后在顶部的工具列,或是「编辑」>「清除」>「清除格式」,点下去之后,刚刚产生的横线就会消失了。

用这个方法画横线、底线、分隔线,比起用一堆等号或是图片还要更方便美观;缺点就只是删除时有点麻烦。

Word文档软件下载地址:Microsoft Word LTSC 2021 for Mac

https://www.macz.com/mac/1340.html?id=NzY4OTYwJl8mMjcuMTg2LjEwLjMx

win10Word文档软件下载:Microsoft Word 2019

https://soft.macxf.com/soft/365.html?id=MjkzODQ%3D