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- 特定方向边框颜色
演示效果请看楼下——
本帖最后由 马黑黑 于 2021-12-23 08:32 编辑 <br /><br /><h1>效果楼</h1>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:solid 1px #ff0000;">
实线核心代码：style="border:solid 1px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:dotted 1px #ff0000;">
点状线核心代码：style="border:dotted 1px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:double 3px #ff0000;">
双线核心代码：style="border:double 3px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:dashed 1px #ff0000;">
虚线核心代码：style="border:dashed 1px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:groove 8px #ff0000;">
3D沟槽核心代码：style="border:groove 8px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:ridge 8px #ff0000;">
3D脊边框核心代码：style="border:ridge 8px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:inset 8px #ff0000;">
嵌入边框核心代码：style="border:inset 8px #ff0000;"
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:outset 8px #ff0000;">
凸出边框核心代码：style="border:outset 8px #ff0000;"
</div> 原来边框有这么多表述方式，这个帖子太好了{:4_199:} <p> <br></p>
<div style="magin:8px auto;padding:8px;width:60%;border:ridge 16px #999;">
试试这个3D脊边框，换个颜色，改变一下边框宽度
</div> 这个太好玩了，有意思{:4_205:} 红影 发表于 2021-12-23 10:19
原来边框有这么多表述方式，这个帖子太好了
感觉内容的量有些大，不知能不能吃得消 马黑黑 发表于 2021-12-23 10:26
感觉内容的量有些大，不知能不能吃得消
这个太好了啊，从来不知道边框有这么多样式，还可以这样玩{:4_173:} 对了，“需要透明时值为 transparent”，这个怎么设，有具体例子么？ 红影 发表于 2021-12-23 10:28
这个太好了啊，从来不知道边框有这么多样式，还可以这样玩
下一步是 border-image ，就是 CSS 图片边框，难度不大，但不好理解，我正在考虑如何组织语言来简单介绍这个属性 红影 发表于 2021-12-23 10:28
对了，“需要透明时值为 transparent”，这个怎么设，有具体例子么？
透明的话就看不见了，一般应用场景不多，你可以试下将 transparent 替换颜色值 <p> <br></p>
<div style="magin:10px auto;padding:10px;width:50%;border:outset 20px #85DCF2;">
再来试试凸出边框
</div> 马黑黑 发表于 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:45 编辑 <br /><br />老黑这个讲解很清晰。谢谢老黑！
</div>
<p> <br></p>
<div style="magin:4px auto;padding:4px;width:80%;border:ridge 8px #ff6666;">
看看这个怎么样 加林森 发表于 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
加油
嗯嗯
页:
[1]
2