分享

【聊代码】第十集 图片标签(之二)

 pfm 2022-08-24 发布于广东

聊代码(第十集)图片标签(之二)

     先看一看下面这幅图片,是有边框线的图片。我们看到的边框非边框标签所为,而是利用了图片标签中边框线属性的结果。

 

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

<img src="http://image109.360doc.com/DownloadImg/2022/08/2408/250820723_1_2022082408104969.jpg" style="border-width: 8px 10px 20px 5px; border-style: solid dotted double dashed; border-color: rgb(255, 0, 255) rgb(0, 255, 0) rgb(255, 0, 0) rgb(0, 255, 255);" width="700" />

     下面,对边框线属性的组成解析。

     红色代码:border-width: 8px 10px 20px 5px; 依次是上、右、下、左边框线的厚度。
     绿色代码:border-style: solid dotted double dashed; 依次是上、右、下、左边框线的样式。
     粉色代码:border-color: rgb(255, 0, 255) rgb(0, 255, 0) rgb(255, 0, 0) rgb(0, 255, 255); 依次是上、右、下、左边框线的颜色。
     从上面的属性代码明显看出,上、下、左、右边框线的属性是单列的,也就是说,各个边框线可以有各自不同的颜色、厚度和样式。

     边框线样式有八种,分列如下:
     实线:solid

     点虚线:dotted

     线虚线:dashed

     双线:double

     3D沟槽状:groove

     3D脊状:ridge

     3D内嵌式:inset

     3D外嵌式:outset

      虽然,边框线可以四边不同色,不同厚度,不同样式,但在一般情况下,在没有特殊要求的情况下,还是相同为好,如果宽窄不统一,样式不统一,再花里呼哨一点,不一定好看吧。另外,朋友们可以探讨一下,边框线的厚度,样式,颜色因为图片有四条边,故设四个属性值,要是不这样呢,只设置一个,两个或三个呢,会是什么样子?朋友们自问自答吧!
      我们还要明白的是:边框线不是边框,它与边框是两个不同的概念。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多