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

常开发中，单边框的样式实现已经家常便饭了，边框属性常用的有 border-color、border-style、border-width。border-color 和 border-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 上创建双边框效果。outline 和 border 类似，但 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);
}

效果如下：

整体效果：

TML提交按钮是一种HTML表单元素，允许用户将表单数据提交到服务器。提交按钮通常与表单元素（如文本框和下拉列表）一起使用，以便用户可以输入并提交信息。在HTML中，提交按钮通常使用标签来定义。

如何编写HTML提交按钮代码？

要创建HTML提交按钮，您需要使用标签，并将type属性设置为“submit”。例如，以下代码会创建一个名为“submit”的提交按钮：

```

在这个例子中，“action”属性指定了表单数据提交到的URL，“method”属性指定了提交表单的HTTP方法（通常是POST或GET）。按钮的“value”属性指定了按钮上显示的文本。

如何自定义HTML提交按钮样式？

默认情况下，HTML提交按钮的样式取决于用户的操作系统和浏览器。但是，您可以使用CSS样式表来自定义按钮的外观。例如，以下代码将创建一个红色的提交按钮：

```

在这个例子中，我们使用了style属性来设置按钮的背景颜色和文本颜色。您还可以使用其他CSS属性来自定义按钮的大小、边框等。

如何使用JavaScript处理HTML提交按钮？

您可以使用JavaScript来添加交互性和验证表单数据。例如，以下代码将在用户单击提交按钮时弹出一个提示框：

```

在这个例子中，我们使用了onsubmit属性来指定当表单提交时要运行的JavaScript函数。此函数返回true或false，如果返回false，则表单将不会提交。在这个例子中，我们使用confirm()函数显示一个提示框，并在用户单击“确定”时返回true。

总结

HTML提交按钮是Web表单中的重要元素，允许用户将表单数据提交到服务器。您可以使用标签来创建提交按钮，并使用CSS样式表自定义外观。您还可以使用JavaScript添加交互性和验证表单数据。通过掌握HTML提交按钮的知识，您可以创建复杂的Web表单，并收集和处理用户数据。

网页设计中经常用到css来设计各种边框样式以及颜色等，有时候需要一个div只显示一个边框，那么你可能会用到下面的一些方法。

一、CSS border-width 属性

border-width是实现显示边框的重要属性。用法如下：

border-width:top right bottom left

参数说明：

top：上边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

right：右边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

bottom：下边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

left：左边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

其中像素如：10px 20px等

内置样式有：

thin：定义细的边框；

medium:默认值，定义中等边框；

thick：定义粗的边框；

inherit：继承父元素的边框宽度。

二、CSS border-style 属性

border-style是用来设置边框线样式的，语法如下：

border-style:样式;

其中可设置的样式有：

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

三、实例应用

只要定义边框不为0，即可显示边框（但是需要定义边框线样式），如果想要只显示下边框就相当于把top、right、left设置为0px；下边框不为0即可。

实例如下：

<html>

<head>

</head>

<body>

<style>

.show{ border-width: 0 0 1px 0; border-style: solid; border-color: black; }

</style>

<div class='show'>只显示下边框</div>

</body>

</html>

显示如下：

如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。

在线咨询

上一篇：怎么把一篇文章制作成一个二维码？
下一篇：一看就懂的Excel表格的基本操作的十大技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商