CSS边框

马黑黑

在CSS世界里，任何 box 都可以拥有边框。box就是盒子，一般指向 div、table、pre、p、audio甚至是 span 等可视元素，通常也称为容器。所谓边框，指盒子的边界，比如装载一段文本的 div，它的四周是有边界的，文本不能超越四个方向的边界。

边界是闭合的，但边框未必可见，因为边框可以有线也可以没有。CSS 就是通过 border（边框）来定义边界的样子。

语法：border:样式 宽度 颜色

其中：

（一）样式：常用的有如下几个——

① solid - 实线
② dotted - 点状线
③ double - 双线
④ dashed - 虚线
⑤ groove - 3D沟槽边框，效果取决于边框颜色（下同）
⑥ ridge - 3D脊边框
⑦ inset - 3D嵌入边框
⑧ outset - 3D凸出边框

（二）宽度：用 1px 等距离表示法表示

（三）颜色：用 #ff0000 之类的合法颜色表达法表示，需要透明时值为 transparent

应用举例：

<div style="padding:8px;border:solid 1px #ff8000;">
        内容
</div>

[说明]

① 例中的 border 有三个值：第一个是 solid，表示边框的样式为实线；第二个值是 1px，表示边框的宽度值为 1 个像素；第三个值是 #ff8000，表示颜色。这三个的顺序可以随意。

② 当需要使用双线时，请设置边框宽度为 3 个像素或以上，如此双线才会明晰。

③ border 是一个简写方式，其样式、宽度和颜色值顺序可以不论。我们也可以通过用以下方式一一定义基于 border 的单一属性：

        border-style - 边框样式（实线虚线等）
        border-*-style - 特定方向边框样式，* 代表 top、right、bottom、left，下同

        border-width - 边框宽度
        border-*-width - 特定方向边框的宽度

        border-color - 边框颜色
        border-*-color- 特定方向边框颜色

演示效果请看楼下——

马黑黑

效果楼

 

实线 核心代码：style="border:solid 1px #ff0000;"

 

点状线 核心代码：style="border:dotted 1px #ff0000;"

 

双线 核心代码：style="border:double 3px #ff0000;"

 

虚线 核心代码：style="border:dashed 1px #ff0000;"

 

3D沟槽 核心代码：style="border:groove 8px #ff0000;"

 

3D脊边框 核心代码：style="border:ridge 8px #ff0000;"

 

嵌入边框 核心代码：style="border:inset 8px #ff0000;"

 

凸出边框 核心代码：style="border:outset 8px #ff0000;"

红影

原来边框有这么多表述方式，这个帖子太好了

红影

 

试试这个3D脊边框，换个颜色，改变一下边框宽度

红影

这个太好玩了，有意思

马黑黑

红影 发表于 2021-12-23 10:19
原来边框有这么多表述方式，这个帖子太好了

感觉内容的量有些大，不知能不能吃得消

红影

马黑黑 发表于 2021-12-23 10:26
感觉内容的量有些大，不知能不能吃得消

这个太好了啊，从来不知道边框有这么多样式，还可以这样玩

红影

对了，“需要透明时值为 transparent”，这个怎么设，有具体例子么？

马黑黑

红影 发表于 2021-12-23 10:28
这个太好了啊，从来不知道边框有这么多样式，还可以这样玩

下一步是 border-image ，就是 CSS 图片边框，难度不大，但不好理解，我正在考虑如何组织语言来简单介绍这个属性

马黑黑

红影 发表于 2021-12-23 10:28
对了，“需要透明时值为 transparent”，这个怎么设，有具体例子么？

透明的话就看不见了，一般应用场景不多，你可以试下将 transparent 替换颜色值

红影

 

再来试试凸出边框

红影

马黑黑 发表于 2021-12-23 10:29
下一步是 border-image ，就是 CSS 图片边框，难度不大，但不好理解，我正在考虑如何组织语言来简单介绍 ...

也就是用图片代替上面的各种线条样式，可以这样理解么？

红影

马黑黑 发表于 2021-12-23 10:30
透明的话就看不见了，一般应用场景不多，你可以试下将 transparent 替换颜色值

哦，直接替换？透明度有百分比的设置么？

马黑黑

红影 发表于 2021-12-23 10:34
哦，直接替换？透明度有百分比的设置么？

没有，就一个单词

马黑黑

红影 发表于 2021-12-23 10:33
也就是用图片代替上面的各种线条样式，可以这样理解么？

是的。不过它的实现机制很巧妙，对此机制的理解是应用的关键，所以我正在组织语言，写了几次，还觉得艰涩，晚上再改改，最迟明天发出

加林森

老黑这个讲解很清晰。谢谢老黑！

 

看看这个怎么样

马黑黑

加林森 发表于 2021-12-23 12:39
本帖最后由 加林森 于 2021-12-23 12:45 编辑 老黑这个讲解很清晰。谢谢老黑！

队长学会了

加林森

马黑黑 发表于 2021-12-23 17:08
队长学会了

还得学习才行啊。

马黑黑

加林森 发表于 2021-12-23 17:15
还得学习才行啊。

加油

加林森

马黑黑 发表于 2021-12-23 17:16
加油

嗯嗯