在之前的画三角形的文章中已经提到了边框(border)的样式,在此呢简单总结一下。
边框(border)分为三部分:宽度、样式、颜色。
同时边框按方向分又分为4个方向(已顺时针为例):上、右、下、左。
1、边框的基本样式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边框样式</title> <style> #div1 { width:200px; height:200px; border: 5px solid red; } </style> </head> <body> <div id="div1"></div> </body> </html>
border:5px solid red 表示边框的样式为:粗细程度为5px,样式为solid(实线),颜色为red(红色)。
这三个值的顺序可随意调整,但是各个值之间要以空格分隔。
边框样式分为:solid(实线)、dotted(点线)、dashed(虚线)。dotted和dashed的效果在不同的浏览器上会有细微的不同。
边框颜色可以使用三种方式来定义:
1、颜色英文。如:red、blue、green等等
2、RGB颜色值。如:rgb(204,249,252)
3、16进制颜色值。如:#ccf9fc
2、边框方向:
默认情况下只写border的话设置的是4个边框的样式。
4个边框分别为:上、右、下、左。
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
4个边框的样式这是方式同border的样式设置,在此不做解释。
需要注意的一个地方是在这是边框样式的时候如果需要将边框隐藏,可以将边框的颜色值设置为transparent,即表示隐藏。如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边框样式</title> <style> #div1 { width:200px; height:200px; border-right:30px solid transparent; border-bottom:30px solid green; border-left:30px solid transparent; } </style> </head> <body> <div id="div1"></div> </body> </html>
如果要设置某个没有某个边框,可以使用none。如:border-top:none;表示没有上边框。
边框样式到此结束,以后将会进一步更新。