CSS border-width

迈不过友情╰ 2024-05-24 04:10 63阅读 0赞

## `border-width` ##

### 语法 ###

1.  `<line-width>{1, 4}`: 表示接收最少 `1` 个, 最多 `4` 个的 `<line-width>` 类型的数据.
    
     *  ?`CSS` 中的数据也是有类型的?
2.  其中 `<line-width>` 可以是
    
     *  `<line-width>` = `<length> | thin | medium | thick`
     *  `|` 表示互斥, 即`<length>`, `thin`, `medium` 和 `thick` 有且只有一个能出现
     *  其中, 文档写的很清楚, 这个 `<length>` 必须`非负`

### 取值 ###

1.  关键词属性
    
     *  支持 `thin`, `medium` 和 `thick`
     *  规范中并没有定义每个关键字代表的具体宽度, 但是遵循的规则是宽度一次增加 `thin <= medium <= thick`
     *  下面看不同浏览器的实现
        
         *  不过各家浏览器表现竟然出乎意料的一致, 三者的计算值分别为 `1px`, `3px`, `5px`,
         *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_19_color_FFFFFF_t_70_g_se_x_16]
         *  ![请添加图片描述][7282ed5c100e41469348eac75980dbea.png]
     *  同时, `medium` 也是边框宽度的默认值, 所以我们可以下面的代码时相同效果的
2.  `<length>`
    
     *  正数和负数: 这个应该不用多想, 正数肯定支持, 文档里说的很清楚不支持负数, 但是如果真的写负数, 浏览器会怎么渲染呢? `Edge` 和 `Firefox` 都是这样渲染的
        
         *      .box3 {
                          
                  border: 1px solid #111;
                  border-top-width: -1px;
                }
         *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16]
     *  小数
        
         *      .box4 {
                          
                  border: 1px solid #111;
                  border-top-width: .1px;
                  border-left-width: .01px;
                  border-bottom-width: 1.1px;
                  border-right-width: 1.8px;
                }
         *  首先看 `Chrome` 浏览器, 不足 `0.5px` 的都渲染为 `0.5px`, 其他的多少就是渲染多少
            
             *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16 1]
         *  但是在 `Firefox` 中, 似乎对小数单位进行了四舍五入, 但是四舍五入的规则是把我整蒙了???. 比如第一张图, `0.7px` 进为 `1px` 但是第二张图 `1.7px` 又舍为 `1.5px`. 可以参考[这篇博客][Link 1], 其中也说到了 `Firefox` 浏览器将有些值向上取整而有些值向下取整. 所以为了避免这种情况, 还是乖乖使用整数吧
            
             *  ![请添加图片描述][3934d63f08e246c3bdc49456221c85d3.png]
             *  ![请添加图片描述][37ac2ec17376449f8efbce601e9cb8a1.png]
     *  百分数
        
         *  目前看来, `Chrome` 和 `Firefox` 都不支持百分数的属性, 所以暂时用不了
         *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16 2]
3.  特殊的事情
    
     *  在 `border` 这个简写属性中, 是可以省略 `border-width` 的, 比如
     *      .box2 {
                    
              border: solid #111;
            }
     *  ❗❗但是, 这个样式在不同浏览器中却展示不一样的. 在 `Chrome`, `Opera` 和 `Edge` 浏览器中, 边框宽度都是 `1.5px`; 但是在 `Firefox` 和 `ie11` 浏览器中, 边框都是 `3px`. 所以为了避免浏览器展示不同, 还是尽量不要省略这个属性
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 应用规则 ###

> `<line-width>{1, 4}`  
> 既然这个属性可以只有 1 个值, 也可以有 4 个值, 那么看一下应用规则

1.  `1`个值
    
     *  四个边框同样宽度
2.  `2`个值
    
     *  第一个值应用于`上, 下`边框
     *  第二个值应用于`左, 右`边框
3.  `3`个值
    
     *  第一个值应用于`上`边框;
     *  第二个值应用于`左, 右`边框;
     *  第三个值应用于`下`边框;
4.  `4`个值
    
     *  四个值分别按照`上, 右, 下, 左`(顺时针)的顺序应用于四个边框

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/f0c1c691606148ce87b876d88c375aaa.png
[7282ed5c100e41469348eac75980dbea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d92f7b0fcacc4477b0511e6f8d7b0b82.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/04914f9e0e9844d68786c14e7502fd4e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/2570ec0fc224435a9d6fe3d0362c1702.png
[Link 1]: https://johnresig.com/blog/sub-pixel-problems-in-css/
[3934d63f08e246c3bdc49456221c85d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e01d2536479746b5962568b0c5af7dc4.png
[37ac2ec17376449f8efbce601e9cb8a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6476b7335f1447d396d93ad9f3433b04.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_10_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/7ee7dd946bec4abd80d168954da765e7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/387359fa7f914cca94a0d32da94e14b4.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/71c84bc23e044bf7aecaad00ce6e71fe.png