CSS 테두리 테두리 속성 튜토리얼(색상 스타일)

CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇

 

一、CSS 边框基础知识 

CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入码农教程提供CSS手册查看border手册：http://www.manongjc.com/cssref/pr_border.html

二、Html原始边框与DIV+CSS边框对照 

Html表格控制边框：
border="1" bordercolor="#000000"
说明：控制表格边框宽度为1px，css颜色为黑色，默认为实线样式边框。

三、border边框语法 

1、四个边框
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

2、四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框

3、边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。

1）、边框颜色：border-color:#000

2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。

3）、border边框样式：border-style:solid

边框样式值如下：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

4）、边框样式截图：

边框border-style样式效果图

四、CSS单独设置左边框、右边框、上边框、下边框 

以缩写方式写上、下、左、右边框单独CSS样式设置方法

1、1px黑色虚线上边框
border-top:1px dashed #000

2、1px黑色实线下边框
border-bottom:1px solid #000

3、1px黑色虚线左边框
border-left:1px dashed #000

4、1px黑色实线右边框
border-right:1px solid #000

五、常用推荐边框样式  

我们通常使用主流浏览器兼容边框样式有：

1、实线边框：solid
Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。

2、虚线边框：dashed
Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。

六、css border边框用处  

设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。

七、border边框样式优化简写图文教程 

CSS border边框属性语法结构分析图（简写优化的边框border）

八、css边框应用案例代码 

描述：为了观察案例效果我们设置一个css宽度为200px，css高度1px,红色实线边框的DIV盒子

CSS代码：
#divcss5{height:100px;width:200px;border:1px solid #F00}

HTML代码对应片段：

我的高度为100px,宽度为200px

9. CSS 테두리 케이스 스크린샷 - TOP

Border 스타일 적용 시연 사례 스크린샷

10. CSS 테두리 요약

우리는 DIV CSS를 사용하여 테두리 스타일을 설정합니다. 일반적으로 객체 테두리 스타일을 설정하기 위해 약어를 사용하는데, 이는 코드를 절약하고 코드 기능을 단순화합니다. 단일 테두리를 설정하든 4면 테두리를 설정하든 우리는 CSS 테두리 최적화의 약어인 CSS 테두리 코드를 축약하려고 합니다. 객체에 CSS 스타일을 설정하는 데 일반적으로 사용되는 속성 코드는 border:1px solid #000;입니다.

11. 세 면에는 엣지가 있지만 한 면에는 세팅 기술이 없습니다

예를 들어 좌우 하단에 테두리가 있고 스타일은 검정색 1PX폭 실선 테두리인데 상단에는 테두리가 없습니다.

CSS 코드: border:1px solid #000; border-top:none;
border:1px solid #000; 및 border-top:none의 순서는 바뀔 수 없습니다. CSS 읽기에는 위에서 아래로, 왼쪽에서 오른쪽으로 읽는 원칙이 있으므로 전체 테두리 스타일을 먼저 설정한 다음 위쪽 테두리를 "없음"으로 선언하는, 즉 여기서 요구하는 스타일을 구현하는 것은 의미가 없습니다. 사례. 이렇게 하면 하단, 왼쪽, 오른쪽을 별도로 설정할 필요가 없어져 일정량의 코드가 절약됩니다.

참고자료:

http://www.manongjc.com/article/1196.html

http://www.manongjc.com/article/1197.html

http://www.manongjc.com/article/1198.html

http://www.manongjc.com/article/1199.html