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

news/2024/10/11 9:23:53/

目录

一、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边框属性允许你指定一个元素边框的样式和颜色。

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中，可以指定不同的侧面不同的边框：

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代码：

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代码:

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.ppmy.cn/news/1443494.html

相关文章

Llama 3消费级PC安装与运行教程

Llama 3消费级PC安装与运行教程

我是 Llama 的忠实粉丝。 Meta 发布其 LLM 开源代码对整个科技界来说是一项净收益&#xff0c;其宽松的许可证允许大多数中小型企业在几乎没有任何限制的情况下使用其 LLM&#xff08;当然&#xff0c;在法律范围内&#xff09;。 他们的最新版本是备受期待的 Llama 3。 Llama…
阅读更多...
Golang Colly批量爬取小红书图片

Golang Colly批量爬取小红书图片

语言：Golang 库：Iris/Colly 先看输入日志： Saved file: images\20240428190531_2_0.jpg It is image 20240428190532_2_1.jpg Saved file: images\20240428190532_2_1.jpg It is image 20240428190533_2_2.jpg Saved file: images\20240428190533_2_2.jpg It is image 2024…
阅读更多...
香港BTC、ETH现货ETF同时通过，对行业意义几何？

香港BTC、ETH现货ETF同时通过，对行业意义几何？

香港比美国更快一步通过以太坊现货 ETF。 2024 年 4 月 15 日&#xff0c;香港嘉实国际资产管理有限公司&#xff08;Harvest Global Investments&#xff09;今天宣布&#xff0c;得到香港证监会的原则上批准&#xff0c;将推出两大数字资产&#xff08;比特币及以太坊&#…
阅读更多...
音频智能切换器JR-AR42-A

音频智能切换器JR-AR42-A

憬锐JR-AR42-A音频自动智能切换器(四切一)&#xff0c;具备四路模拟卡侬立体声音频输入&#xff0c;两路模拟卡侬立体声音频输出&#xff0c;其中输入第1路和输出第1路为断电直通通道。具有输入音频信号幅度判别&#xff0c;可设置门限电平和切换延时时间&#xff0c;可以根据需…
阅读更多...
装饰器模式、代理模式、适配器模式对比

装饰器模式、代理模式、适配器模式对比

装饰器模式、代理模式和适配器模式都是结构型设计模式&#xff0c;它们的主要目标都是将将类或对象按某种布局组成更大的结构&#xff0c;使得程序结构更加清晰。这里将装饰器模式、代理模式和适配器模式进行比较&#xff0c;主要是因为三个设计模式的类图结构相似度较高、且功…
阅读更多...
redis模糊查询redis中的key

redis模糊查询redis中的key

redis模糊查询redis中的key 方式一&#xff1a;使用keys命令 /*** 查找匹配的key** param pattern* return*/ public Set<String> keys(String pattern) {return redisTemplate.keys(pattern); }方式二&#xff1a;使用san命令 /*** 查找匹配的key** param pattern* r…
阅读更多...
SpringMVC（SSM框架）

SpringMVC（SSM框架）

目录 一、MVC模式 二、获取请求参数 1. 通过HttpServletRequest获取 2. 通过方法参数获取 3. 通过PathVariable获取 4. 通过ModelAttributes获取 5. 使用RequestBody获取请求体 三、处理响应 四、异常处理 1. 使用ExceptionHandler注解 2. 使用ControllerAdvice和Re…
阅读更多...
pyCharm导入pyspark中的sparkconf和sparkcontext错误

pyCharm导入pyspark中的sparkconf和sparkcontext错误

背景&#xff1a;学习黑马程序员python课程的pyspark实战部分时按照下图导入pysark包时发现sparkconf和sparkcontext无法导入和运行。 首先想到是不是在CMD窗口下载的pySpark路径及安装是否正确&#xff1f; 通过下图发现第三方库都安装正确&#xff0c;然后就考虑库的路径&a…
阅读更多...
最新文章

Copyright @ 2022~2023