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

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 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，和我交流。

图片

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SpringCloudAlibaba-整合nacos（二）

SpringCloudAlibaba-整合nacos（二）

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 一、nacos服务部分 1.下载nacos&#xff0c;并执行数据库脚本&#xff1a;nacos-mysql.sql 2.修改配置文件&#xff0c;配置mysql 3.启动nacos ./startup.sh -m standalone 4.访问&#xff1a;http://127.0.0.1:884…
阅读更多...
Golang快速入门教程（一）

Golang快速入门教程（一）

目录 一、环境搭建 1.windows安装 2.linux安装 3.开发工具 二、变量定义与输入输出 1.变量定义 2.全局变量与局部变量 3.定义多个变量 4.常量定义 5.命名规范 6.输出 7.输入 三、基本数据类型 1.整数型 2.浮点型 3.字符型 4.字符串类型 转义字符 多行字符…
阅读更多...
基于51单片机的多床位病房呼叫器Proteus仿真

基于51单片机的多床位病房呼叫器Proteus仿真

地址&#xff1a;https://pan.baidu.com/s/1WLTBD9WaWncZS_uRSjM-iA 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectroni…
阅读更多...
企业微信认证后可以修改主体吗?

企业微信认证后可以修改主体吗?

企业微信变更主体有什么作用&#xff1f;如果原有的公司注销了&#xff0c;或者要更换一家公司主体来运营企业微信&#xff0c;那么就可以进行变更主体&#xff0c;变更主体后才可以保留原来企业微信上的所有用户&#xff0c;否则就只能重新申请重新积累用户了。企业微信变更主…
阅读更多...
机器学习和深度学习--李宏毅（笔记与个人理解）Day9

机器学习和深度学习--李宏毅（笔记与个人理解）Day9

Day9 Logistic Regression&#xff08;内涵&#xff0c;熵和交叉熵的详解&#xff09; 中间打了一天的gta5&#xff0c;图书馆闭馆正好npy 不舒服那天天气不好&#xff0c;哈哈哈哈哈总之各种理由吧&#xff0c;导致昨天没弄起来&#xff0c;今天补更&#xff01; 这里重点注意…
阅读更多...
面向对象设计原则实验“依赖倒置原则”

面向对象设计原则实验“依赖倒置原则”

高层模块不应该依赖于低层模块。二者都应该依赖于抽象。抽象不应该依赖于细节。细节应该依赖于抽象。 &#xff08;开闭原则、里氏代换原则和依赖倒转原则的三个实例很相似&#xff0c;原因是它之间的关系很紧密&#xff0c;在实现很多重构时通常需要同时使用这三个原则。开闭…
阅读更多...
【智能优化算法详解】粒子群算法PSO量子粒子群算法QPSO

【智能优化算法详解】粒子群算法PSO量子粒子群算法QPSO

1.粒子群算法PSO 博主言简意赅总结-算法思想&#xff1a;大方向下个体自学习探索群体交流共享 对比适应度找到最优点 背景 粒子群算法&#xff0c;也称粒子群优化算法或鸟群觅食算法&#xff08;Particle Swarm Optimization&#xff09;&#xff0c; 缩写为 PSO。粒子群…
阅读更多...
HarmonyOS实战开发-如何实现文件管理相关的功能。

HarmonyOS实战开发-如何实现文件管理相关的功能。

介绍 本示例主要展示了文件管理相关的功能&#xff0c;使用ohos.multimedia.medialibrary 、ohos.filemanagement.userFileManager 、ohos.fileio 、ohos.file.fs、ohos.app.ability.contextConstant 等接口&#xff0c;实现了增添文件、删除文件、查找指定类型文件文件、复制…
阅读更多...
2024年MathorCup+认证杯数模竞赛思路预定与助攻计划

2024年MathorCup+认证杯数模竞赛思路预定与助攻计划

2024年的第14届“妈妈杯”与认证杯即将启动&#xff0c;云顶数模将团队众多国奖学长学姐将再次为大家精心准备的高质量解题思路、参考代码等&#xff0c;帮助大家在妈妈杯获得理想的成绩&#xff0c;也为国赛奠定坚实基础&#xff01;&#xff01; 小云也为大家提供了本周末两场…
阅读更多...
安装selenium和关于chrome高版本对应的driver驱动下载安装【Win/Mac 】

安装selenium和关于chrome高版本对应的driver驱动下载安装【Win/Mac 】

目录 一、查看自己电脑上chrome的版本 二、下载 ChromeDriver 三、安装selenium 法一&#xff1a;打开pycharm&#xff0c;点击File&#xff0c;Setting进入配置页面&#xff0c;点击Project下面的Python Interpreter进入环境配置页面&#xff0c;点击。输入selenium。之后…
阅读更多...
【太阳能控制器升压芯片方案】DC-DC异步升压恒压外置MOS芯片FP5207 主要应用于太阳能灯带、太阳能路灯/投光灯等市场

【太阳能控制器升压芯片方案】DC-DC异步升压恒压外置MOS芯片FP5207 主要应用于太阳能灯带、太阳能路灯/投光灯等市场

随着社会经济的发展&#xff0c;能源危机与生态环境问题日趋严重&#xff0c;大力发展可再生能源已经成为当今世界的必然趋势。太阳能作为取之不尽、清洁干净的资源&#xff0c;已成为世界各国研究开发的热点。光伏发电具有技术成熟、产业化程度高的特点&#xff0c;受到世界各…
阅读更多...
一、幼儿园校园广播系统（IP网络广播）建设背景

一、幼儿园校园广播系统（IP网络广播）建设背景

幼儿园为给儿童提供优雅的学习生活环境&#xff0c;园领导决定建设一套幼儿园校园广播&#xff08;IP网络广播&#xff09;系统。 二、幼儿园校园广播系统&#xff08;IP网络广播&#xff09;简述 幼儿园校园广播系统&#xff08;IP网络广播&#xff09;&#xff0c;采用“技…
阅读更多...
Linux第88步_非阻塞IO实验

Linux第88步_非阻塞IO实验

非阻塞IO是“应用程序”对“驱动设备”进行操作&#xff0c;若不能获取到设备资源&#xff0c;则非阻塞IO应用程序的线程不会被“挂起”&#xff0c;即线程不进入休眠&#xff0c;而是一直“轮询”&#xff0c;直到获取到设备资源为止&#xff0c;或者直接放弃。 非阻塞IO应用举…
阅读更多...
[计算机效率] 鼠标手势工具：WGestures(解放键盘的超级效率工具)

[计算机效率] 鼠标手势工具：WGestures(解放键盘的超级效率工具)

3.22 鼠标手势工具&#xff1a;WGestures 通过设置各种鼠标手势和操作进行绑定。当用户通过鼠标绘制出特定的鼠标手势后就会触发已经设置好的操作。有点像浏览器中的鼠标手势&#xff0c;通过鼠标手势操纵浏览器做一些特定的动作。这是一款强大的鼠标手势工具&#xff0c;可以…
阅读更多...
大语言模型：红蓝对抗的工作原理及作用

大语言模型：红蓝对抗的工作原理及作用

您是否对强大的生成式AI领域心生好奇&#xff0c;却又担心随之而来的潜在漏洞&#xff1f;您只需了解红蓝对抗就好了&#xff0c;它也称为破解或提示注入。AI开发的这一关键环节往往被忽视&#xff0c;但其在提高生成式AI模型的性能方面发挥的作用却至关重要。 大语言模型&…
阅读更多...
TFT显示屏驱动

TFT显示屏驱动

REVIEW 已经学习过VGA 时序与实现-CSDN博客 VGA 多分辨率-CSDN博客 今天就来让TFT屏显示一下 小梅哥视频&#xff1a;24 RGB TFT显示屏原理与驱动实现_哔哩哔哩_bilibili 1. 设置显示屏参数与时钟 注意到VGA_parameter.v中&#xff0c;不懂得分辨率对应于不同的频率&#xff…
阅读更多...
基于springboot实现洗衣店订单管理系统项目【项目源码+论文说明】

基于springboot实现洗衣店订单管理系统项目【项目源码+论文说明】

基于springboot实现洗衣店订单管理系统演示 摘要 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个专门适应洗衣店业务新的交流形式的网站。本文介绍了洗衣店订单管理系统的开发全过程。通过分析企业对于洗衣店订单管理系统…
阅读更多...
Golang | Leetcode Golang题解之第20题有效的括号

Golang | Leetcode Golang题解之第20题有效的括号

题目&#xff1a; 题解&#xff1a; func isValid(s string) bool {n : len(s)if n % 2 1 {return false}pairs : map[byte]byte{): (,]: [,}: {,}stack : []byte{}for i : 0; i < n; i {if pairs[s[i]] > 0 {if len(stack) 0 || stack[len(stack)-1] ! pairs[s[i]] {…
阅读更多...
甘特图在生产进度管理中的应用

甘特图在生产进度管理中的应用

生产进度管理在生产制造过程中起着至关重要的作用。 它主要关注对生产进程的掌控和安排&#xff0c;确保生产活动能够按照预定的计划和时间顺利进行&#xff0c;以达到按时交付产品的目标。 在生产进度管理中&#xff0c;首先需要制定一个详细且合理的生产计划&#xff0c;明…
阅读更多...
深度学习学习日记4.7

深度学习学习日记4.7

1.梯度下降 w 新 w旧 - 学习率梯度 训练的目的就是让 loss 减小 2.前向传播进行预测&#xff0c; 反向传播进行训练(每一个参数通过梯度下降进行更新参数)&#xff0c;(1前向传播 2求 loss 3反向传播 4梯度更新) 能够让损失下降的参数&#xff0c;就是更好的参数。 损失…
阅读更多...
最新文章

Copyright @ 2022~2023