html加一个边框

2026-04-18 阅读 177 评论 0

摘要：方法1：内联样式（直接写在HTML标签）
html

这是一个带边框的DIV

左边框带圆角的段落

方法2：使用CSS样式表（推荐）
html

/ 类选择器 /

方法1：内联样式（直接写在HTML标签）

html

html加一个边框

这是一个带边框的DIV

左边框带圆角的段落

html

通用边框样式

特殊边框效果

带阴影边框的图片

1. border: 复合属性，格式：`宽度样式颜色`

宽度：`1px`, `0.5em` 等

样式：`solid`(实线), `dashed`(虚线), `dotted`(点线), `double`(双线)

颜色：颜色名称、十六进制或RGB值

2. 单独设置某边：

`border-top`

`border-right`

`border-bottom`

`border-left`

3. 扩展效果：

`border-radius`: 圆角边框（可用百分比创建椭圆）

`box-shadow`: 添加阴影效果

`outline`: 外围轮廓线（不占空间）

添加边框会影响元素尺寸，建议同时设置 `box-sizing: border-box`

图片边框推荐使用 `padding` 创建留白效果

表格边框需要设置 `border-collapse: collapse` 消除双线

上一篇：blt-s210

标签：边框一个 html