• 关于border-color的一些小问题


    CSS边框:

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。借用CSS border 属性允许我们规定元素边框的样式、宽度和颜色。
    CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
    CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。
    本篇博客中,主要浅谈border-color属性。
    而设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值。
    可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:

    p {
      border-style: solid;
      border-color: green rgb(45%,30%,45%) #909090 aqua;
      }
    

    而这四个颜色,分别对应了border的上、右、下、左四个边框的颜色属性。

    那么如果我们没有给足四种颜色,浏览器会如何编译代码呢?
    border-color:red;

    显然,只给定一种颜色是,自然border的上下左右均为该色。
    border-color:red aqua;

    可见,最终结果上同下、左同右。
    那么我们只给定三种颜色呢?
    border-color: red #CD7425 aqua;

    我们可以发现,左边的颜色最终和右边的相同,而赋值颜色是顺序为上右下左,由此可见,当赋值颜色少于4时:
    颜色数量为一,则均为该色。
    颜色数目为二,上下为第一色,左右为第二色
    颜色数目为三,上下为指定色,左右均为右(也就是第二个颜色赋值)
    那我们总结一下其实就会发现:当未被赋值时,边框的颜色其实就是与其对称边的颜色。这也就解释了为什么赋予三种颜色时,左边框的颜色与右边而不是临近值(下边框)的颜色相同。同样的道理,当赋予两种颜色时,因为赋值的顺序为上右下左,所以上右为赋值颜色,下与上对称,所以颜色同上,而左,也自然同右。

  • 相关阅读:
    利用闭包向post回调函数传参数
    在seajs中使用require加载静态文件的问题
    jqGrid标题行与第一行之间有很大空白的问题解决。
    关于bootstrapValidator提交问题的解决
    心得(一)
    使用心得(一)
    Dreamweaver CC 2018/64位下载地址及安装教程
    tf.test.is_gpu_available()报错false的解决方案
    Tensorflow——[Could not load dynamic library cudart64_101.dll]解决方案
    如何验证是否正确安装了CUDA
  • 原文地址:https://www.cnblogs.com/kangna/p/12211574.html
Copyright © 2020-2023  润新知