CSS border边框（理解网页边框制作）

目录

一、border边框介绍

1.概念

2.特点

 3.功能

 4.应用

 二、border边框用法

1.border边框属性

 2.边框样式

3.边框宽度

 4.边框颜色

 5.边框-单独设置各边

 6.边框-简写属性

三、border边框属性

 四、border边框实例

1.创建带有阴影效果的边框：

2. 创建一个类似标签的元素，带有箭头和不规则边框：

 五、总结

一、border边框介绍

1.概念

边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。

2.特点

  • 可定制性：可以通过 CSS 属性定制边框的样式、宽度和颜色。
  • 可视化效果：边框可以为元素增加视觉上的分隔和装饰效果，使页面看起来更有层次感。
  • 盒模型一部分：边框是 CSS 盒模型中的一部分，位于内容区域之外。

 3.功能

  • 定义边界：边框定义了元素的边界，使元素在页面中有所区分。
  • 装饰效果：通过设置不同样式的边框，可以为元素增加装饰效果，如圆角、阴影等。
  • 分隔元素：边框可以用于分隔不同的元素或内容区域，提高页面布局的清晰度。

 4.应用

  • 页面布局：边框可用于定义网格布局中的列或行，以分隔不同的区域。
  • 图片边框：在图像周围创建装饰性的边框，以增强图片的外观。
  • 表单设计：在表单元素周围添加边框，以突出显示表单的输入区域。

 二、border边框用法

1.border边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

border: border-width || border-style || color;
  • border-width：边框宽度，可以是一个值（例如 1px）或四个值（例如 1px 2px 3px 4px，分别对应上、右、下、左边框宽度）。
  • border-style：边框样式，可以是一个值（例如 solid）或四个值（例如 solid dotted dashed double，分别对应上、右、下、左边框样式）。
  • color：边框颜色，可以是一个颜色值（例如 red）或四个颜色值（例如 red green blue yellow，分别对应上、右、下、左边框颜色）。

示例：

<!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>
        div{
            width: 400px;
            height: 40px;
            padding: 20px;
            margin-top: 20px;
            text-align: center;
            line-height: 40px;
        }
        .border1{
            border: 2px solid black;
        }
        .border2{
            border-bottom: 2px solid red;
        }
        .border3{
            border: 1px solid black;
            border-radius: 10px;
        }
        .border4{
            background-color: aquamarine;
            border-left: 10px solid cyan;
        }
    </style>
</head>
<body>
    <div class="border1">在四周都有边框</div>
    <div class="border2">红色底部边框</div>
    <div class="border3">圆角边框</div>
    <div class="border4">左侧边框带宽度，颜色为蓝色</div>
</body>
</html>

效果如下：

 2.边框样式

border-style值

none默认无边框
dotted定义一个点线边框
dashed定义一个虚线边框
solid定义实线边框
double定义两个边框。 两个边框的宽度和 border-width 的值相同
groove定义3D沟槽边框。效果取决于边框的颜色值
ridge定义3D脊边框。效果取决于边框的颜色值
inset定义一个3D的嵌入边框。效果取决于边框的颜色值
outset定义一个3D突出边框。 效果取决于边框的颜色值

3.边框宽度

可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

 4.边框颜色

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

  • name - 指定颜色的名称，如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

 5.边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;
    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;
    • 四面边框是 dotted

 6.边框-简写属性

可以在"border"属性中设置：

  • border-width
  • border-style (required)
  • border-color

三、border边框属性

border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
border-radius设置圆角的边框。

 四、border边框实例

1.创建带有阴影效果的边框：

css代码：

.shadow-border {
    border: 2px solid #333;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    padding: 20px;
}

html代码

<div class="shadow-border">
    <p>This is a content inside a border with shadow effect.</p>
</div>

效果如下

2. 创建一个类似标签的元素，带有箭头和不规则边框：

css代码:

.tag {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    background-color: #f00;
    color: #fff;
}

.tag::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f00;
    transform: translateX(-50%);
}

html代码

<div class="tag">
    Example Tag
</div>

效果如下

 五、总结

  1. border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。

  2. border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。

  3. border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。

  4. border（边框简写属性）：用于同时设置边框的宽度、样式和颜色，顺序为宽度、样式、颜色。

  5. border-radius（边框圆角）：使边框的角变为圆角，可以单独设置每个角的半径，也可以统一设置所有角的半径。

  6. border-image（边框图片）：允许将图像用作边框，可以指定图像、边框宽度、边框样式等属性。

  7. box-shadow（盒子阴影）：为元素添加阴影效果，可以控制阴影的偏移、模糊程度、颜色等属性。

  8. outline（轮廓线）：与边框类似，但不占据布局空间，常用于表现元素的焦点状态。

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

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

相关文章

安全测试工具箱

安全测试工具箱

工具列表 WebShell管理工具 哥斯拉v4.0.1 冰蝎v3.0Beta_11 冰蝎v4.1 冰蝎魔改v3.3.2 中国蚁剑v2.1.15 天蝎权限管理工具v1.0 Alien权限管理工具v4.0 渗透利器工具 BurpSuite Pro 2023.5.1 DudeSuite Cobalt Strike 4.7美化破解版 XieBro-v3.1 Counter-Strike1.6 YAKIT XRAY…
阅读更多...
3d软件哪个适合新手学？3D动画渲染怎么好

3d软件哪个适合新手学？3D动画渲染怎么好

在不同的行业领域&#xff0c;3D建模和动画的需求各异&#xff0c;因此所需的3D软件工具也会有所不同。对于刚开始接触3D设计的新手来说&#xff0c;软件的易操作性、丰富的学习资源以及与自己专业领域相关的功能是选择时的重要考虑因素。以下是几款适合初学者入门的3D软件推荐…
阅读更多...
【Linux】gdb的简单使用

【Linux】gdb的简单使用

文章目录 一、gdb是什么&#xff1f;二、使用说明1. 安装2. 注意事项3. 常用调试指令3.1 gdb3.2 l3.3 r3.4 n3.5 s3.6 b3.7 info b3.8 finish3.9 p3.10 set var3.11 c3.12 d breakpoints3.13 d n3.14 disable/enable breakpoints3.15 disable/enable n3.16 info b3.17 display …
阅读更多...
【UE C++】打印输出的两种方式

【UE C++】打印输出的两种方式

目录 一、UE_LOG 二、调试屏幕信息 一、UE_LOG 定义&#xff1a; UE_LOG 是一个将格式化消息记录到日志文件中的宏。 用法&#xff1a; UE_LOG(LogTemp, Warning, TEXT("Hello World")); 第一个输入参数 LogTemp 是提供给 DEFINE_LOG_CATEGORY 宏的类别名称。你…
阅读更多...
饲料颗粒生产利器：全套饲料颗粒机设备揭秘

饲料颗粒生产利器：全套饲料颗粒机设备揭秘

想要了解饲料颗粒机的全套设备吗&#xff1f;这里为您详细解析&#xff0c;让您对饲料颗粒机的全套配置一目了然&#xff01;饲料颗粒机全套设备&#xff0c;可谓是饲料生产的得力助手。从原料处理到颗粒成型&#xff0c;再到后续的包装存储&#xff0c;这套设备都能轻松应对。…
阅读更多...
常见的网站

常见的网站

1.小林coding图解计算机网络、操作系统、计算机组成、数据库&#xff0c;让天下没有难懂的八股文&#xff01;https://xiaolincoding.com/ 2. 弟弟快看 弟弟快看-教程&#xff0c;程序员编程资料站 | DDKK.COM弟弟快看-教程&#xff0c;内容覆盖、Java核心、J2EE框架、ORM框架…
阅读更多...
CSS详解（二）

CSS详解（二）

接上篇CSS详解&#xff08;一&#xff09;-CSDN博客 1、网页布局本质 网页布局的本质是通过 CSS 将各种 HTML 元素&#xff08;即“盒子”&#xff09;摆放到页面中合适的位置。这包括设置元素的尺寸、位置、边距、填充、对齐方式、浮动等。这些盒子通过 CSS 的各种布局机制进…
阅读更多...
【书生浦语第二期实战营学习笔记作业(四)】

【书生浦语第二期实战营学习笔记作业(四)】

课程文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/readme.md 作业文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/homework.md 书生浦语第二期实战营学习笔记&作业(四) 1.1、微调理论讲解及 XTuner 介绍 两种Fin…
阅读更多...
WMTS服务介绍

WMTS服务介绍

WMTS规定使用瓦片矩阵集&#xff08;Tile Matrix Set&#xff09;来表示切割后的地图&#xff0c;如图1所示&#xff0c;不同瓦片矩阵具有不同的比例尺&#xff08;分辨率&#xff09;&#xff0c;每个瓦片矩阵由瓦片矩阵标识符&#xff08;一般为瓦片矩阵的序号&#xff0c;分…
阅读更多...
echarts树图-树效果展示

echarts树图-树效果展示

echarts树图实现数据以树的结构展示&#xff0c;其效果如下&#xff1a; 代码如下&#xff1a; const data {name: XXX公司,itemStyle: {color: #00ADD0},children: [{name: 网络主机,itemStyle: {color: #FFA12F},children: [{name: 普通路由器,itemStyle: {color: #604BF…
阅读更多...
高可靠性部署系列（2）--- IPS双机热备

高可靠性部署系列（2）--- IPS双机热备

高可靠性部署系列（2）--- IPS双机热备 前言网络拓扑设备选型网络规划组网需求配置思路操作步骤结果验证前言 近期有读者留言：“因华为数通模拟器仅能支持USG6000V的防火墙，无法支持别的安全产品，导致很多网络安全的方案和产品功能无法模拟练习，是否有真机操作的实验或者案…
阅读更多...
Kimi 大模型支持 Tool Calling 功能，并入驻字节「扣子Coze」开发平台！

Kimi 大模型支持 Tool Calling 功能，并入驻字节「扣子Coze」开发平台！

Kimi 大模型API 支持 Tool Calling 功能 Kimi 大模型学会「使用工具」了，API 已支持 Tool Calling 功能。开发者们在打造自己的 AI Agents 时，可以让 Kimi 大模型与丰富的自定义外部工具进行交互，打开 AI 应用更大的想象空间。例如，在对话中，当用户问到一家公司的地址时，…
阅读更多...
SAP BPC UJKT使用详解

SAP BPC UJKT使用详解

SAP BPC(SAP Business Planning and Consolidation)旨在帮助企业进行财务规划、预算编制、预测分析和财务报告。 一、UJKT是什么&#xff1f; UJKT是什么呢&#xff1f;它是SAP 中的一个TCODE&#xff0c;该事务码的描述为脚本逻辑检测器&#xff0c;对应的源代码程序为&#…
阅读更多...
nuxt3 无法创建项目问题

nuxt3 无法创建项目问题

Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed 错误信息 解决方案 进入windows系统修改hosts文件 C:\Windows\System32\drivers\etc增加以…
阅读更多...
IDEA中Vue开发环境搭建

IDEA中Vue开发环境搭建

1. IDEA安装Vue.js 文件>设置>插件>搜索Vue.js并安装。 2. 安装Node.js 官网地址&#xff1a;https://nodejs.org 安装包下载地址&#xff1a;https://nodejs.org/en/download 下载并安装&#xff0c;安装时&#xff0c;勾选添加系统变量选项。 # 如果正确安装…
阅读更多...
如何批量跟踪京东物流信息

如何批量跟踪京东物流信息

随着电商行业的快速发展&#xff0c;快递业务日益繁忙&#xff0c;无论是商家还是消费者&#xff0c;都需要一种高效、便捷的快递查询工具。快递批量查询高手软件应运而生&#xff0c;以其强大的功能和便捷的操作体验&#xff0c;赢得了广大电商、微商精英们的青睐。 快递批量…
阅读更多...
通用计算平台与医用计算平台的差异

通用计算平台与医用计算平台的差异

1.通用计算平台参考信息 《医疗器械软件注册审查指导原则&#xff08;2022年修订版&#xff09;&#xff08;2022年第9号&#xff09;》中关于“通用计算平台”有说参考《IMDRF/SaMD WG/N10 FINAL: 2013》 2.IMDRF/SaMD WG/N10 FINAL: 2013中关于通用计算平台的说明 3.通用计…
阅读更多...
YOLOv8常见水果识别检测系统（yolov8模型，从图像、视频和摄像头三种路径识别检测）

YOLOv8常见水果识别检测系统（yolov8模型，从图像、视频和摄像头三种路径识别检测）

1.效果视频&#xff08;常见水果识别&#xff08;yolov8模型&#xff0c;从图像、视频和摄像头三种路径识别检测&#xff09;_哔哩哔哩_bilibili&#xff09; 资源包含可视化的水果识别检测系统&#xff0c;可识别图片和视频当中出现的六类常见的水果&#xff0c;包括&#xf…
阅读更多...
git lab 2.7版本修改密码命令

git lab 2.7版本修改密码命令

1.gitlab-rails console -e production Ruby: ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-linux] GitLab: 14.9.0-jh (51fb4a823f6) EE GitLab Shell: 13.24.0 PostgreSQL: 12.7 2根据用户名修改密码 user User.find_by(username: ‘username’) # 替换’use…
阅读更多...
2024年航空航天与工业技术国际学术会议(IACAIT 2024)

2024年航空航天与工业技术国际学术会议(IACAIT 2024)

2024年航空航天与工业技术国际学术会议(IACAIT 2024) 2024 International Conference on Aerospace and Industrial Technology 一、【会议简介】 2024年航空航天与工业技术国际学术会议&#xff0c;将汇集全球顶尖专家&#xff0c;探讨前沿技术。 这次会议主题为“航空航天与…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站