【聊代码】第十集：图片标签（之二）|老小孩博文

     下面的就是含有边框线属性的该图片的图片标签。

 

＜img src="https://www.oldkids.cn/upload/2018/05/23/blog_20180523212011376.jpg" style="BORDER-TOP: rgb(218,165,32) 20px solid; BORDER-BOTTOM: rgb(218,165,32) 20px solid; BORDER-LEFT:#DAA520 80px solid; BORDER-RIGHT:Goldenrod 80px solid; width="450" /＞

 

     下面，对边框线属性的组成解析。
     上边框线属性：颜色—厚度—样式：BORDER-TOP: rgb(218,165,32) 20px solid;

     下边框线属性：颜色—厚度—样式：BORDER-BOTTOM: rgb(218,165,32) 20px solid;

     左边框线属性：颜色—厚度—样式：BORDER-LEFT:#DAA520 80px solid;

     右边框线属性：颜色—厚度—样式：BORDER-RIGHT:Goldenrod 80px solid;

 

       从上面的属性代码明显看出，上、下、左、右边框线的属性是单列的，也就是说，各个边框线可以有各自不同的颜色、厚度和样式。从上图可看出，上、下边窄，左右边宽，因为我们设置的厚度属值不同。颜色也可以作不一样的设置（在上图边框线的属性中，我设置的四边线均为金黄色，同一个颜色，我采用了英文，十进制。十六进制三种不同的表示方式，目的是借此机会再让朋友进一步熟悉一下颜色的三种表示法，别无他意）。颜色代码后面的属值，例如：“20px”是表示边框线厚度的，而在厚度属值后面的“solid”是边框线样式，它表示的是实线。

 

     边框线样式有八种，分列如下：
     实线：solid

     点虚线：dotted

     线虚线：dashed

     双线：double

     3D沟槽状：groove

     3D脊状：ridge

     3D内嵌式：inset

     3D外嵌式：outset

 

      虽然，边框线可以四边不同色，不同厚度，不同样式，但在一般情况下，在没有特殊要求的情况下，还是相同为好，如果宽窄不统一，样式不统一，再花里呼哨一点，不一定好看吧！。
      我们还要明白的是：边框线不是边框，它与边框是两个不同的概念。