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.mzph.cn/pingmian/3467.shtml

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

相关文章

汽车企业安全上网解决方案

汽车企业安全上网解决方案

需求背景 成立于1866年的某老牌汽车服务独立运营商&#xff0c;目前已经是全球最大的独立汽车服务网络之一&#xff0c;拥有95年的历史&#xff0c;在全球150多个国家拥有17,000多个维修站&#xff0c;始终致力于为每一位车主提供高品质&#xff0c;可信赖的的专业汽车保养和维…
阅读更多...
用友政务财务系统 FileDownload 任意文件读取漏洞复现

用友政务财务系统 FileDownload 任意文件读取漏洞复现

0x01 产品简介 用友政务财务系统具有多项核心功能，旨在满足各类组织的财务管理需求。首先，它提供了财务核算功能，能够全面管理企业的总账、固定资产、现金、应付应收等模块，实时掌握企业的财务状况，并通过科目管理、凭证处理、报表分析等功能为决策提供有力支持。 0x02 …
阅读更多...
【Github】sync fork后，意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后，意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后&#xff0c;意外关闭之前提交分支的pr申请 找回被关闭的pr请求分支中的文件 写在最前面原因解析提交pr&#xff0c;pr是什么&#xff1f;rebase 或者 merge 命令 找到分支中被删除的文件找到被关闭的提交请求pr方法1&#xff1a;在公共仓库被关闭的pr中…
阅读更多...
Java电子签名图片生成工具类

Java电子签名图片生成工具类

在业务中有需要用户信息确认时候去进行电子签名&#xff0c;在实现电子签名存证时候&#xff0c;可以在前端生成图片也可以在后端生成签名存证图片&#xff0c;这里实现一下关于后端Java实现的方法&#xff0c;并总结成工具类&#xff0c;方便之后调用。 工具类方法一 import…
阅读更多...
Django框架之Django安装与使用

Django框架之Django安装与使用

一、Django框架下载 首先我们需要先确定好自己电脑上的python解释器环境&#xff0c;否则会导致后面项目所需要的库安装不了以及项目无法运行的问题。 要下载Django并开始使用它&#xff0c;你可以按照以下步骤进行&#xff1a; 1、安装Python 首先&#xff0c;确保你的计算…
阅读更多...
【Redis】Redis 非关系型数据库 安装、配置、使用（全集）

【Redis】Redis 非关系型数据库 安装、配置、使用（全集）

目录 Redis 第一章 1、什么是redis 2、安装redis 1-7 8 3、redis使用 第二章 1、redis的使用 1、使用方式 2、使用Java代码使用redis 3、优化连接redis 2、五种数据类型 常用命令 string hash list set zset 不同数据类型存、取、遍历的方法 3、redis在项目…
阅读更多...
Redis网络部分相关的结构体2 和 绑定回调函数细节

Redis网络部分相关的结构体2 和 绑定回调函数细节

目录 1. struct connection ConnectionType属性 创建connection 2. struct client 3. 绑定客户端回调函数的流程 3.1. 读事件回调函数的设置 3.2. 写事件回调函数的设置 3.3. connSocketEventHandler函数 3.4. Redis5版本的设置回调函数 3.5. 个人的一些想法&#xf…
阅读更多...
人工智能好多人都在用，那么用户画像要怎么看？

人工智能好多人都在用，那么用户画像要怎么看？

用户画像是通过对用户行为、偏好、兴趣等数据进行分析和整理&#xff0c;从而形成的关于特定用户群体的描述和模型。在人工智能应用中&#xff0c;用户画像可以起到指导个性化推荐、精准营销、产品设计等方面的作用。以下是用户画像在人工智能应用中的几个重要方面&#xff1a;…
阅读更多...
汽车Type-C接口：特点与要求解析

汽车Type-C接口：特点与要求解析

汽车Type-C接口的需求增长 随着汽车科技的不断发展&#xff0c;车载电子设备的功能和数量不断增加&#xff0c;因此&#xff0c;对于汽车Type-C接口的需求也在逐渐增长。作为一种高速、多功能的连接标准&#xff0c;汽车Type-C接口在车载设备连接中扮演着越来越重要的角色。 …
阅读更多...
Nginx 四层和七层代理区别、配置

Nginx 四层和七层代理区别、配置

四层&#xff1a;通过报文中的目标地址和端口&#xff0c;加上负载均衡设备设置的服务器选择方式&#xff0c;决定最终选择的内部服务器&#xff0c;使用tcp、udp协议。 七层&#xff1a;"内容交换"&#xff0c;通过报文中真正有意义的应用层内容&#xff0c;加上负…
阅读更多...
Go开发者指南：`io/ioutil`库的实战应用全解

Go开发者指南：`io/ioutil`库的实战应用全解

Go开发者指南&#xff1a;io/ioutil库的实战应用全解 概述io/ioutil函数概览ReadAllReadFileWriteFileReadDirTempFile 和 TempDir 实战技巧&#xff1a;使用io/ioutil进行文件操作高效读取文件文件的写入操作处理大文件的策略使用TempFile和TempDir管理临时文件 高级应用结合o…
阅读更多...
【Leetcode】377. 组合总和 Ⅳ

【Leetcode】377. 组合总和 Ⅳ

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个由 不同 整数组成的数组 n u m s nums nums&#xff0c;和一个目标整数 t a r g e t target target 。请你从 n u m s nums nums 中找出并返回总和为 t a r g e t targ…
阅读更多...
leetcode-二叉搜索树与双向链表-89

leetcode-二叉搜索树与双向链表-89

题目要求 思路 1.观察给的用例&#xff0c;本质上是把数据按照中序遍历连接起来 2.将结点以中序遍历的方式插入到数组中&#xff0c;注意这里是vector<TreeNode*> 3.将数组中的数据连接起来 代码实现 /* struct TreeNode {int val;struct TreeNode *left;struct TreeN…
阅读更多...
基于昇腾AI 使用AscendCL实现垃圾分类和视频物体分类应用

基于昇腾AI 使用AscendCL实现垃圾分类和视频物体分类应用

现如今&#xff0c;人工智能迅猛发展&#xff0c;AI赋能产业发展的速度正在加快&#xff0c;“AI”的需求蜂拥而来&#xff0c;但AI应用快速落地的过程中仍存在很大的挑战&#xff1a;向下需要适配的硬件&#xff0c;向上需要完善的技术支持&#xff0c;两者缺一不可。 基于此&…
阅读更多...
去雾笔记-Pixel Shuffle，逆Pixel Shuffle，棋盘效应，转置卷积

去雾笔记-Pixel Shuffle，逆Pixel Shuffle，棋盘效应，转置卷积

文章目录 1.Pixel Shuffle2.Inverse Pixel Shuffle3.棋盘效应4.转置卷积5.宽激活块6.PSPNet7.反射填充层&#xff08;Reflective Padding Layer&#xff09;8.tanh层 1.Pixel Shuffle Pixel Shuffle是一种用于图像超分辨率的技术&#xff0c;它通过重新排列图像的像素来增加图…
阅读更多...
树莓派学习笔记--Wiring Pi库的安装

树莓派学习笔记--Wiring Pi库的安装

前言 在刚开始学习树莓派的时候&#xff0c;新版本操作系统与旧版本有一定的区别&#xff0c;就导致跟着网上的教程来出现了很多问题&#xff0c;然后网上新操作系统的教程又很少&#xff0c;就导致前些时间学习一直没有进展。最近终于是把这些问题解决了。所以记录下来这些东西…
阅读更多...
MySql篇

MySql篇

索引 B-树 定义&#xff1a; 1、根节点至少包含两个孩子 2、每个节点最多包含m个孩子(m > 2)&#xff0c;m为树的深度 3、除了根节点和叶子节点&#xff0c;其他节点至少有ceil(m/2)个孩子&#xff0c;ceil函数为取上限&#xff0c;例如ceil(1.2)2&#xff0c;就是小数位…
阅读更多...
游戏新手村18：游戏广告渠道与广告形式

游戏新手村18：游戏广告渠道与广告形式

上文我们说到&#xff0c;渠道为王&#xff0c;渠道可以为我们带来流量和用户&#xff0c;进而带来收入。我们可以通过哪些渠道导入用户呢&#xff1f;每个渠道有哪些优劣呢&#xff1f;在进行游戏营销推广的时候我们该如何选择呢&#xff1f; 根据付费性质&#xff0c;我们可…
阅读更多...
Pytorch迁移学习训练病变分类模型

Pytorch迁移学习训练病变分类模型

划分数据集 1.创建训练集文件夹和测试集文件夹 # 创建 train 文件夹 os.mkdir(os.path.join(dataset_path, train))# 创建 test 文件夹 os.mkdir(os.path.join(dataset_path, val))# 在 train 和 test 文件夹中创建各类别子文件夹 for Retinopathy in classes:os.mkdir(os.pa…
阅读更多...
【Windows】达芬奇19安装教程

【Windows】达芬奇19安装教程

DaVinci Resolve Studio是一个结合专业的8k编辑、颜色混合、视觉效果和音频后期制作的软件。只需点击一下&#xff0c;你就可以立即在编辑、混音、特效和音频流之间切换。此外&#xff0c;达芬奇是一个多用户协作的解决方案&#xff0c;使编辑、助理、色彩学家、视觉效果设计师…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023