CSS 基础：border 的 3 个基础属性和简写方法

news2025/6/25 8:08:23

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

264篇原创内容-gzh

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

border（边框）是 CSS 中用来装饰元素周围区域的样式属性，主要作用是美化页面元素并提供视觉分隔效果。

那我们一起来看一看它的基础属性，简写方法吧。

3个基础属性

1、边框样式

边框样式属性border-style用于定义边框的外观，常见的属性值包括以下 7 个：

  • solid：实线边框，显示为一条实心线。

  • dashed：虚线边框，显示为一系列短线段。

  • dotted：点线边框，显示为一系列点。

  • double：双线边框，显示为两条并排的实线。

  • groove：凹槽边框，显示为带有 3D 凹槽效果的边框。

  • ridge：凸起边框，显示为带有 3D 凸起效果的边框。

  • inset：内嵌边框，显示为带有 3D 内嵌效果的边框。

  • outset：外凸边框，显示为带有 3D 外凸效果的边框。

来看看代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Style Example</title>
    <style>
      .box {
        width: 500px;
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 50px;
      }

      .solid-border {
        border-style: solid;
      }

      .dashed-border {
        border-style: dashed;
      }

      .dotted-border {
        border-style: dotted;
      }

      .double-border {
        border-style: double;
      }

      .groove-border {
        border-style: groove;
      }

      .ridge-border {
        border-style: ridge;
      }

      .inset-border {
        border-style: inset;
      }

      .outset-border {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <p class="box solid-border">实线边框</p>
    <p class="box dashed-border">虚线边框</p>
    <p class="box dotted-border">点线边框</p>
    <p class="box double-border">双线边框</p>
    <p class="box groove-border">凹槽边框</p>
    <p class="box ridge-border">凸起边框</p>
    <p class="box inset-border">内嵌边框</p>
    <p class="box outset-border">外凸边框</p>
  </body>
</html>

效果如图：

图片

这个示例展示了一个带有虚线边框的<p>元素。 需要注意的是：如果未设置 border-style 属性，则其他 CSS 边框属性将

2、边框颜色

边框颜色属性border-color用于设置边框的颜色。

它的取值类型有很多种，具体见这篇颜色html基础：颜色的 5 种表示方法（最全！）的文章，除此之外，还有一个文字属性值transparent(透明)。

来举个案例吧，顺便把之前的学到的 2 个属性一起用起来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Example</title>
    <style>
      .box {
        width: 500px;
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 50px;
      }

      .solid-border {
        border-style: solid;
        border-width: 5px;
        border-color: rgb(255, 0, 0);
      }

      .dashed-border {
        border-style: dashed;
        border-width: 5px;
        border-color: #008000;
      }

      .dotted-border {
        border-style: dotted;
        border-width: 5px;
        border-color: #0000ff;
      }

      .double-border {
        border-style: double;
        border-width: 5px;
        border-color: rgba(35, 160, 218, 0.5);
      }

      .groove-border {
        border-style: groove;
        border-width: 5px;
        border-color: #ffa500;
      }

      .ridge-border {
        border-style: ridge;
        border-width: 5px;
        border-color: #800080;
      }

      .inset-border {
        border-style: inset;
        border-width: 5px;
        border-color: #cd5656;
      }

      .outset-border {
        border-style: outset;
        border-width: 5px;
        border-color: #ffc0cb;
      }
      .transparent-border {
        border-style: outset;
        border-width: 5px;
        border-color: transparent; /* 透明边框 */
      }
    </style>
  </head>
  <body>
    <p class="box solid-border">实线边框</p>
    <p class="box dashed-border">虚线边框</p>
    <p class="box dotted-border">点线边框</p>
    <p class="box double-border">双线边框</p>
    <p class="box groove-border">凹槽边框</p>
    <p class="box ridge-border">凸起边框</p>
    <p class="box inset-border">内嵌边框</p>
    <p class="box outset-border">外凸边框</p>
    <p class="box transparent-border">透明边框</p>
  </body>
</html>

看看效果。

图片

注意：如果没有设置border-color属性，边框颜色将会继承元素的颜色设置，不会产生任何效果。

3、边框宽度

边框宽度属性border-width用于设置边框的粗细。

它的取值类型有 2 种：

  • 长度值：包括像素(px)、百分比(%)等单位。

  • 固定值包括细边框（thin）、中等边框（medium）、粗边框（thick）等关键词，这个不常用，因为不够精确。

来举个案例吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Width Example</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        border-style: solid;
      }
      .px-border {
        border-width: 10px;
      }
      .percentage-border {
        border-width: 10%;
      }
      .thin-border {
        border-width: thin;
      }
      .medium-border {
        border-width: medium;
      }
      .thick-border {
        border-width: thick;
      }
    </style>
  </head>
  <body>
    <p class="box px-border">10px Border Width</p>
    <p class="box percentage-border">10% Border Width</p>
    <p class="box thin-border">Thin Border</p>
    <p class="box medium-border">Medium Border</p>
    <p class="box thick-border">Thick Border</p>
  </body>
</html>

效果如下：

图片

如果设计稿给的四个边的边框宽度都不一样，怎么办？那就需要自定义这个写法啦。 统一按照以下写法规则。

  • 如果只有 1 个值，表示所有四个边框的宽度都一样。

  • 如果有 2 个值，表示上下边框宽度为第一个值，左右边框宽度为第二个值。

  • 如果有 3 个值，表示上边框宽度为第一个值，左右边框宽度为第二个值，下边框宽度为第三个值。不建议这些写，不便于朗读，新手更是容易出错，建议用下一种，4个值来表示。

  • 如果有 4 个值，表示顺序为上右下左的边框宽度。 这个上右下左顺序，就像是手表的顺时针，从 12 点到 9 点，转一圈儿，这样子记。

举例说明：

  • border-width: 1px;：所有四个边框的宽度都为 1 像素。

  • border-width: 1px 2px;：上下边框宽度为 1 像素，左右边框宽度为 2 像素。

  • border-width: 1px 2px 3px;：上边框宽度为 1 像素，左右边框宽度为 2 像素，下边框宽度为 3 像素。

  • border-width: 1px 2px 3px 4px;：上边框宽度为 1 像素，右边框宽度为 2 像素，下边框宽度为 3 像素，左边框宽度为 4 像素。

来，代码演示下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Width Examples</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        border-style: solid;
        border-color: black;
      }

      .example1 {
        border-width: 1px;
      }

      .example2 {
        border-width: 1px 2px;
      }

      .example3 {
        border-width: 1px 2px 3px;
      }

      .example4 {
        border-width: 1px 2px 3px 4px;
      }
      .diy-border {
        border-style: solid dashed dotted solid;
        border-color: #00f #333 #f00 #0f0;
        border-width: 5px 10px 20px 30px;
      }
    </style>
  </head>
  <body>
    <p class="box example1">1px Border Width</p>
    <p class="box example2">1px Top & Bottom, 2px Left & Right Border Width</p>
    <p class="box example3">1px Top, 2px Left & Right, 3px Bottom Border Width</p>
    <p class="box example4">1px Top, 2px Right, 3px Bottom, 4px Left Border Width</p>
    <p class="box diy-border">自定义边框</p>
  </body>
</html>

图片

border-style，border-width， border-color，这 3 个边框属性值均可以按照上右下左的顺序进行指定。比如上面的.diy-border元素。

注意：一定要好好多方面的练习预览效果，因为后续的盒子模型的属性，也遵循此规则。

指定单边的边框样式

这时候，我们发现，其实四个边事可以自定义的，那，如果只想定义单独的边样式，应该如何写呢？

以下就是，指定单个边框的属性：

  1. border-top-style：用于指定上边框的样式。

  2. border-top-width：用于指定上边框的宽度。

  3. border-top-color：用于指定上边框的颜色。

  4. border-right-style：用于指定右边框的样式。

  5. border-right-width：用于指定右边框的宽度。

  6. border-right-color：用于指定右边框的颜色。

  7. border-bottom-style：用于指定下边框的样式。

  8. border-bottom-width：用于指定下边框的宽度。

  9. border-bottom-color：用于指定下边框的颜色。

  10. border-left-style：用于指定左边框的样式。

  11. border-left-width：用于指定左边框的宽度。

  12. border-left-color：用于指定左边框的颜色。

以下是一个示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Bottom Demo</title>
    <style>
      .border-demo {
        border-bottom-style: solid;
        border-bottom-color: blue;
        border-bottom-width: 3px;
      }
    </style>
  </head>
  <body>
    <div class="border-demo">This is a div element with a solid blue bottom border of 3 pixels width.</div>
  </body>
</html>

效果如下：

图片

这段代码创建了一个带有底部边框的 div 元素，边框样式为实线（solid），颜色为蓝色（blue），宽度为 3 像素。

这些属性分别用于控制单个边框的样式、宽度和颜色。很明显的规律是，它们都是比基础属性的写法中间，加了方位词而已。

边框简写属性

1、四个边框

正如你所见，border 属性有以上 3 个基础属性，为了缩减代码，它们又可以组合成 1 个简写属性， 那就是border，用于设置所有四个边框的宽度、样式和颜色。

border 属性是以下各个边框属性的简写属性，以空格间隔：

  • border-width

  • border-style（必有！）

  • border-color

来举个案例吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box {
        border-style: solid;
        border-width: 5px;
        border-color: #17a167;
      } */
      /* 一个border, 和上面3个属性的效果是一样的 */
      .box {
        border: 5px solid #17a167;
      }
    </style>
  </head>
  <body>
    <p class="box">边框</p>
  </body>
</html>

2、单个边框

单侧边框，就是 border-方位词（top|right|bottom|left），然后属性值的写法顺序同上 border。

如下代码示范：

<style>
  /* .border-demo {
        border-bottom-style: solid;
        border-bottom-color: blue;
        border-bottom-width: 3px;
      } */
  /* 和上面3个属性的效果是一样的 */
  .border-demo {
    border-bottom: 3px solid blue;
  }
</style>

ok ，以上，本文完。也欢迎加我w.x，和我交流。

图片

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1584305.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

labelImg将图像标签显示到界面

labelImg将图像标签显示到界面

打开View的显示类别 但是颜色不够清晰&#xff0c;我想自己定制 我的象棋红色和黑色两种。并且把字体方法一些。 可以看到 color self.select_line_color if self.selected else self.line_color参考&#xff1a;https://blog.csdn.net/qq_41082953/article/details/10330225…
阅读更多...
ppt从零基础到高手【办公】

ppt从零基础到高手【办公】

第一章&#xff1a;文字排版篇01演示文稿内容基密02文字操作规范03文字排版处理04复习&作业解析第二章&#xff1a;图形图片图表篇05图形化表达06图片艺术化07轻松玩转图表08高效工具&母版统一管理09复习&作业解析10轻松一刻-文字图形小技巧速学第三章&#xff1a;…
阅读更多...
【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…
阅读更多...
uniapp 卡片勾选

uniapp 卡片勾选

前言 公司的app项目使用的uniapp&#xff0c;项目里有一个可勾选的卡片功能&#xff0c;效果图如下&#xff1a; 找了一圈没找到什么太好的组件&#xff0c;于是就自己简单写了一个&#xff0c;记录一下。避免以后还会用到 代码 <template><view class"card-…
阅读更多...
如何训练自己的ChatGPT？需要多少训练数据？

如何训练自己的ChatGPT？需要多少训练数据？

近年&#xff0c;聊天机器人已经是很常见的AI技术。小度、siri、以及越来越广泛的机器人客服&#xff0c;都是聊天机器人的重要适用领域。然而今年&#xff0c;ChatGPT的面世让这一切都进行到一个全新的高度&#xff0c;也掀起了大语言模型&#xff08;LLM&#xff09;的热潮。…
阅读更多...
CMake 学习笔记2

CMake 学习笔记2

其他很好的总结 CMake教程系列-01-最小配置示例 - 知乎 1、基本关键字 MESSAGE关键字 向终端输出用户自定义的信息 主要包含三种信息 SEND_ERROR&#xff0c;产生错误&#xff0c;生成过程被跳过STATUS,输出前缀--的信息&#xff0c;MESSAGE(STATUS "this is binary…
阅读更多...
【nodejs基础学习三-浏览器偏好设置】

【nodejs基础学习三-浏览器偏好设置】

系列文章目录 第一章 nodejs基础学习–注释、变量、运算符、字符串、函数&#xff08;一&#xff09; 第二章 nodejs基础学习–循环、对象字符、模块导入出&#xff08;二&#xff09; 第三章 nodejs基础学习三-浏览器设置 系列文章目录一、开发者模式二、web偏好设置 一、开发…
阅读更多...
LinuxAndroid: 旋转编码器input输入事件适配(旋转输入)

LinuxAndroid: 旋转编码器input输入事件适配(旋转输入)

rk3588s: 旋转编码器input输入事件适配 基于Android 12 kernel-5.10版本 参考文档&#xff1a; https://blog.csdn.net/szembed/article/details/131551950 Linux 输入设备调试详解&#xff08;零基础开发&#xff09;Rotary_Encoder旋转编码器驱动 通用GPIO为例 挂载input输…
阅读更多...
【mT5多语言翻译】之一——实战项目总览

【mT5多语言翻译】之一——实战项目总览

[1] 总览 【mT5多语言翻译】系列共六篇文章&#xff1a; 【mT5多语言翻译】之一——实战项目总览   【mT5多语言翻译】之二——模型&#xff1a;T5模型与mT5模型与前置知识   【mT5多语言翻译】之三——数据集&#xff1a;多语言翻译数据集与预处理   【mT5多语言翻译】之…
阅读更多...
Java使用aspose-words实现word文档转pdf

Java使用aspose-words实现word文档转pdf

Java使用aspose-words实现word文档转pdf 1.获取转换jar文件并安装到本地maven仓库 aspose-words-15.8.0-jdk16.jar包下载地址&#xff1a;https://zhouquanquan.lanzn.com/b00g257yja 密码:965f 下载aspose-words-15.8.0-jdk16.jar包后&#xff0c;通过maven命令手动安装到本…
阅读更多...
报修小程序怎么建立？维修服务行业的智能化升级

报修小程序怎么建立？维修服务行业的智能化升级

在这个数字化飞速发展的时代&#xff0c;维修服务行业也在经历着前所未有的变革。消费者对于服务的期待不再局限于传统的电话预约或线下等待&#xff0c;而是希望能够通过更加智能、便捷的途径解决日常生活中的维修问题。在这样的背景下&#xff0c;报修小程序应运而生&#xf…
阅读更多...
SAAS医院管理系统总结

SAAS医院管理系统总结

时间很久了&#xff0c;颗粒归仓的重要性 再次体现&#xff0c;经历即成长 兼职也能学到东西 boot web mybatis-plus dynamic-datasource druid pagehelper必须的啦 shiro devtools没必要 软件供应商 给客户提供服务的形式&#xff1a; SAAS&#xff1a;软件即服务&#xf…
阅读更多...
Github Benefits 学生认证/学生包 新版申请指南

Github Benefits 学生认证/学生包 新版申请指南

本教程适用于2024年之后的Github学生认证申请&#xff0c;因为现在的认证流程改变了很多&#xff0c;所以重新进行了总结这方面的指南。 目录 验证教育邮箱修改个人资料制作认证文件图片转换Base64提交验证 验证教育邮箱 进入Email settings&#xff0c;找到Add email address…
阅读更多...
kafka（五）——消费者流程分析(c++)

kafka（五）——消费者流程分析(c++)

概念 ​ 消费者组&#xff08;Consumer Group&#xff09;&#xff1a;由多个consumer组成。消费者组内每个消费者负责消费不同分区的数据&#xff0c;一个分区只能由一个组内消费者消费&#xff1b;消费者组之间互不影响。所有的消费者都属于某个消费者组&#xff0c;即消费者…
阅读更多...
219 基于matlab的汽车悬架（钢板弹簧，减震器）设计程序ＧＵＩ

219 基于matlab的汽车悬架（钢板弹簧，减震器）设计程序ＧＵＩ

基于matlab的汽车悬架&#xff08;钢板弹簧&#xff0c;减震器&#xff09;设计程序&#xff27;&#xff35;&#xff29;。根据需求输入设计参数&#xff0c;包括前桥负荷、簧下质量、弹簧刚度、阻尼等&#xff0c;输出钢板弹簧、减震器结果。程序已调通&#xff0c;可直接运…
阅读更多...
数据结构-----链表

数据结构-----链表

目录 1.顺序表经典算法 &#xff08;1&#xff09;移除元素 &#xff08;2&#xff09;合并数组 2.链表的创建 &#xff08;1&#xff09;准备工作 &#xff08;2&#xff09;建结构体 &#xff08;3&#xff09;链表打印 &#xff08;4&#xff09;尾插数据 &#xff…
阅读更多...
电介质材料（三）

电介质材料（三）

本篇为西安交通大学本科课程《电气材料基础》的笔记。 本篇为这一单元的第三篇笔记&#xff0c;上一篇传送门&#xff0c;下一篇传送门。 固体电介质材料 分为有机绝缘材料和无机绝缘材料。有机绝缘材料包括塑料、橡胶、纤维等&#xff1b;无机绝缘材料包括玻璃、陶瓷、云母…
阅读更多...
Spring Boot统一功能处理之拦截器

Spring Boot统一功能处理之拦截器

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…
阅读更多...
Harmony鸿蒙南向驱动开发-UART

Harmony鸿蒙南向驱动开发-UART

UART指异步收发传输器&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;&#xff0c;是通用串行数据总线&#xff0c;用于异步通信。该总线双向通信&#xff0c;可以实现全双工传输。 两个UART设备的连接示意图如下&#xff0c;UART与其他模块一般用2线&a…
阅读更多...
关于Keil 的编译选项 LTO 代码优化 你必须知道的事

关于Keil 的编译选项 LTO 代码优化 你必须知道的事

LTO 这个 听起来很好&#xff0c;功能强大 但是一定要慎用 平时不要用&#xff0c; 功能开发完成前不要用&#xff0c; 等代码运行稳定后在开启优化师可以的 不然 掉坑里 你很久会爬不出来 这个选项 会让很多高级自定义功能失效&#xff0c;甚至函数报错&#xff0c;奇怪的异…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023