CSS - 边框区域

1、边框 - border

用于设置各种单独的边界。

简写属性：

border-width、border-style、border-color

形势语法：
border = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset
语法示例：
style
border: solid;

width | style 
border: 2px dotted;

style | color 
border: outset #f33;

width | style | color
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;
取值：

  • 1.1、边框样式 border-style

用来设定元素所有边框的样式。

简写属性：

包含：border-top-style、border-left-style、border-right-style、border-bottom-style

语法：
border-style = 
  <line-style>{1,4}  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset
语法示例：
适用于所有四个方面
border-style: dashed;

horizontal | vertical
border-style: dotted solid;

top | horizontal | bottom
border-style: hidden double dashed;

top | right | bottom | left
border-style: none solid dotted dashed;

Global values
border-style: inherit;
border-style: initial;
border-style: unset;
取值：

  • none ：不显示边框 ，和关键字 hidden 类似。
    在这种情况下，如果没有设定背景图片，border-width计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，
    none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。

  • hidden：不显示边框，和关键字 none 类似。
    在这种情况下，如果没有设定背景图片，border-width计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，
    hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。

  • dotted：显示为一系列圆点。
    标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width计算值的一半。

  • dashed：显示为一系列短的方形虚线。
    标准中没有定义线段的长度和大小，视不同实现而定。

  • solid：显示为一条实线。

  • double：显示为一条双实线，宽度是 border-width 。

  • groove：显示为有雕刻效果的边框，样式与 ridge 相反。

  • ridge：显示为有浮雕效果的边框，样式与 groove 相反。

  • inset：显示为有陷入效果的边框，样式与 outset 相反。
    当它指定到 border-collapse为 collapsed 的单元格时，会显示为 groove 的样式。

  • outset：显示为有突出效果的边框，样式与 inset 相反。
    当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。

示例1：
.css
border-style: dotted; 
border-style: dashed solid; 
border-style: dashed double none; 
border-style: dashed groove none dotted;
示例2：
<p style="border-style: none;">none: 默认无边框</p>
<p style="border-style: dotted; ">dotted: 定义一个点线边框</p>
<p style="border-style: solid; ">solid: 定义实线边框</p>
<p style="border-style: double; ">double: 定义两个边框。 两个边框的宽度和 border-width 的值相同</p>
<p style="border-style: groove; border-width: 10px;border-color: green;">groove: 定义3D沟槽边框。效果取决于边框的颜色值</p>
<p style="border-style: ridge; border-width: 10px;border-color: green;">ridge: 定义3D脊边框。效果取决于边框的颜色值</p>
<p style="border-style: inset; border-width: 10px;border-color: green;">定义一个3D的嵌入边框。效果取决于边框的颜色值</p>
<p style="border-style: outset; border-width: 10px;border-color: green;">outset: 定义一个3D突出边框。 效果取决于边框的颜色值</p>

效果：

 
 

  • 1.2、边框宽度 border-width

设置盒子模型的边框宽度。

简写属性：

包含：border-top-width, border-right-width, border-bottom-width、border-left-width。

形式语法：
border-width = 
  <line-width>{1,4}  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
语法示例：
用法一：明确指定宽度值
当给定一个宽度时，该宽度作用于选定元素的所有边框
border-width: 5px;

当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 
border-width: 2px 1.5em;

当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边
border-width: 1px 2em 1.5cm;

当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用
border-width: 1px 2em 0 4rem;

用法二：使用全局关键字
可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置
border-width: inherit;

用法三：使用作用于 border-width 的关键字
border-width: thin;
border-width: medium;
border-width: thick;
取值：

  • <length>：指定宽度值。

  • 关键字：

    • thick ：宽边线
    • medium：默认值，中等边线。
    • thin：细边线。

  • 全局关键字

    • inherit：继承。
    • initial：初始值。
    • unset：不设置。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

  • 1.3、边框颜色 border-color

设置元素四个边框颜色。

简写属性：

包含：border-top-color、border-right-color、border-bottom-color、border-left-color。

形式语法：
border-color = 
  <color>{1,4}
语法示例：
单值语法
border-color: red;

双值语法
border-color: red #f015ca;

三值语法
border-color: red yellow green;

四值语法
border-color: red yellow green blue;

关键字继承
border-color: inherit

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

 
 

  • 1.4、其他边框简写

  • border-top：描述了元素的上边框样式。简写属性，包含：

    • border-top-color，border-top-style 与 border-top-width

  • border-bottom：描述了元素的下边框样式。简写属性，包含：

    • border-bottom-color，border-bottom-style 与 border-bottom-width

  • border-left：描述了元素的左边框样式。简写属性，包含：

    • border-left-color，border-left-style 与 border-left-width

  • border-right：描述了元素的右边框样式。简写属性，包含：

    • border-right-color，border-right-style 与 border-right-width

 
 

2、边框圆角 border-radius

设置元素的外边框圆角。

简写属性，

包含： border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

形势语法：
border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>
语法示例：
border-radius: 4px 3px 6px / 2px 4px;  

等价于：

border-radius: 4px 3px 6px 3px / 2px 4px 2px 4px; 

等价于：两两配对。

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;
取值:

  • <length>： 定义圆形半径或椭圆的半长轴，半短轴。负值无效。

  • <percentage>：定义圆形半径或椭圆的半长轴，半短轴。负值无效。
    水平半轴相对于盒模型的宽度；
    垂直半轴相对于盒模型的高度。

示例：
border: solid 10px;
border-radius: 10px 40px 40px 10px;

border: groove 1em red;
border-radius: 2em;

background: gold;
border: ridge gold;
border-radius: 13em/3em;

border: none;
border-radius: 40px 10px;
background: gold;

border: none;
border-radius: 50%;
background: burlywood;

border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  
border: dashed;
border-width: 2px 4px;
border-radius: 40px;

效果：

注意：

  • 即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。

  • 当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

 
 

3、边框图片 border-image

允许在元素的边框上绘制图像。

简写属性，

包含：border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat

注意：使用border-image 时，其将会替换掉border-style属性所设置的边框样式。
虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

形式语法：
border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>
语法示例：
border-image: image-source image-height image-width image-repeat
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
取值：

  • 3.1 图片源 border-image-source

用于声明元素的边框图片border-image的资源。

形式语法
border-image-source =
none     |
<image>

<image> =
<url>       |
<gradient>
语法示例：
没有border-image，使用指定的border-style
border-image-source: none;

使用image.jpg图像
border-image-source: url(image.jpg);

线性渐变图像
border-image-source: linear-gradient(to top, red, yellow);

 Global values
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
取值:
  • none：默认值，不会使用图片边框。
  • image: 可以是url(..)图片，也可以是渐变<gradient>图片。

 
 

  • 3.2 图像切割 border-image-slice

用于将border-image-source引用的图像划分为 9 个区域。使用划分好的区域组成了一个元素的边框图像。

如图：
语法形式：
border-image-slice = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?
语法示例：
/* All sides */
border-image-slice: 30%;

/* vertical | horizontal */
border-image-slice: 10% 30%;

/* top | horizontal | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
取值

  • <number>：表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。
    对于矢量图，<number> 值与元素大小相关，而非矢量图的原始大小。因此，使用矢量图时，使用百分比值<percentage>更可取。

  • <percentage>：以原始图像大小的百分比表示的边缘偏移量。
    水平偏移使用图像的宽度。
    垂直偏移则使用图像的高度。

  • fill：保留图像的中心区域并将其作为背景图像显示出来，但其会堆叠在 background 之上。
    它的宽度和高度分别对应顶部和左侧图像切片的宽度和高度。

  • 3.3 边框图像宽度 border-image-width

指定了 边界图像的宽度。
如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展

语法形式：
 border-image-width = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>
语法示例：
/* 关键字 */
border-image-width: auto;

/* 长度 */
border-image-width: 1rem;

/* 百分比 */
border-image-width: 25%;

/* 数值 */
border-image-width: 3;

/* 垂直 | 水平 */
border-image-width: 2em 3em;

/* 上 | 横向 | 下 */
border-image-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

/* 全局值 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
取值

  • <length - persentage>：边界的宽度，可按 <length>或 <percentage> 指定。
    百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。

  • <数值>：边框宽度，指定为 border-width 的相应倍数，不能为负。

  • auto：将等同于内部对应的border-image-slice 的宽或高（可用的话）。
    如果图像没有需要的相应的属性，将相对于 border-width 进行指定。

 
 

  • 3.4 边框图像超出 border-image-outset

定义边框图像可 超出 边框盒的大小。

语法形式:
border-image-outset = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}
语法示例：
/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset: 顶 水平 底 */
border-image-outset: 30px 30% 45px;

/* border-image-outset:顶 右 底 左  */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;

 
 

  • 3.5、边框图像填充 border-image-repeat

定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

语法形式：
border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}
语法示例：
单值语法
border-image-value: stretch;

双值语法
border-image-width: round space;

继承
border-image-repeat: inherit
取值：
  • stretch：拉伸图片以填充边框。
  • repeat：平铺图片以填充边框。
  • round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
  • space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

 
 

  • 3.6 示例

看完属性介绍后很懵逼咋办啊？啥意思？没关系我们来测试一下。

在此之前我们先介绍一下我们引用的图片，如图：

记住：它的尺寸是 90 * 90 。

 

示例1：默认值
.html
<div></div>
.css
div {
    width: 180px;
    height: 180px;
    background-color: green;
    border: 30px solid red;
    
    /* 默认值*/
    border-image-source: url(4.png);
    border-image-slice: 100% ;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;               
}

效果：

代码解析：
在top、right、bottom、left、方向上，都按照 100% (90的尺寸)的尺寸，进行切割。并填充border。

这个时候就有问题了，咱们要的是边框整个的填充，为啥只在四个角上出现呢？
没关系接下来我们尝试修改一下border-image-slice的值，看看会有什么变化。

 
 

示例2：修改border-image-slice 的值。
border-image-slice: 45 ;
border-image-slice: 44 ;
border-image-slice: 30 ;
border-image-slice: 30 fill;

效果：

代码解析：

  • border-image-slice: 45 ;: 表示 left + right = 90, bottom + top = 90 ，意味着，我们在 5，6，7，8区域内切到了0尺寸的图片，所以此时没有图片来填充，5，6，7，8区域。得到了 第一张 图片。

  • border-image-slice: 44 ;：表示left + right = 89, bottom + top = 89，意味着，我们在 5，6，7，8区域内切到了1尺寸的图片来填充。又因为设置了 border-image-repeat: stretch;，即 拉伸这个1尺寸图片，最终得到了 第二张 图片。

  • border-image-slice: 30 ;：表示left + right = 30, bottom + top = 30，意味着，我们在 5，6，7，8区域内切到了30尺寸的图片来填充。又因为设置了 border-image-repeat: stretch;，即 拉伸这个30尺寸图片，最终得到了 第三张 图片。

  • border-image-slice: 30 fill;：因为设置了 fill，所以会按照我们设置属性，将图片整个作为了背景图。

此时有的小伙伴可能还有疑问：如果设置border-image-slice: 45 fill;会如何？
其实 第一个值 * 2 ，并在 水平 和 垂直 方向都 大于 图片的最大尺寸，那么 5，6，7，8 ，9 区域 都只会 切到 0尺寸的图片，即没有图片来填充，所以即使 设置了fill 也没啥变化的。

到这里应该就差不多明白了 border-image-slice 属性的意思。

根据语法可知，border-image-slice 属性 可以设置 多个值 ，如下：
border-image-slice: 30 10;
border-image-slice: 30 10 20;
border-image-slice: 30 10 20 15;
感兴趣的小伙伴自己动手吧，此处就不做过多的赘述了。

接下来我们研究一下 border-image-width属性

 
 

示例3：修改border-image-width 
border: 30px solid red;
border-image-slice: 30 fill;

border-image-width: 2;
border-image-width: 10px;
border-image-width: 10px 30px 30px 10px; 
border-image-width: 10%;
border-image-width: 10px 10px auto;
border-image-width: 2 auto 2 2;

效果：

代码解析：

  • border-image-width: 2：默认值，指定 4个方向 的边框的宽 为 border-width 属性值的 2倍数 来显示。即：30px * 2。

  • border-image-width: 10px：指定 4个方向 的边框的属性 border-width的宽为 10px 来显示。

  • border-image-width: 10px 30px 30px 10px;：分别指定 上，右，底，左 边框的属性border-width 为 宽 10px 30px 30px 10px 来显示。

  • border-image-width: 10%;：饿.... ，没整明白..... 有懂的可以下发留言，感谢🙏～

  • border-image-width: 10px 10px auto;：分别指定 上，右+左边框的 属性border-width 为 宽 10px 来显示，底边框 为 border-width属性 30px 来显示 。

  • border-image-width: 2 auto auto 2;：分别指定 上，左 边框的宽 为 border-width的 2倍数 来显示，底，右边框 为 默认倍数 宽来显示。

  • fill：设置border-image-width值的不同，9区域的填充，会自动调整，图片会自行拉伸也满足条件。

 
 

示例4：修改border-image-outset值
border: 30px solid red;
border-image-slice: 30 fill;

border-image-outset: 1 0.5;
border-image-outset: 10px;

效果：

代码解析：
其实就是修改超出边框的偏移量，还是很好理解的。

 
 

示例5：修改border-image-repeat值
border-image-slice: 33 fill;

border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

效果：

代码解析：
这个属性也是很好理解的，我们温故一下

  • stretch：拉伸图片以填充边框。
  • repeat：平铺图片以填充边框。
  • round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
  • space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

 
 

4、边框的合并与分隔 border-collapse

用来决定 表格元素的边框 是分开的还是合并的。
在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

学习html 的 <table> 元素时已经接触过了。

形式语法：
border-collapse = 
  separate  |
  collapse
语法示例：
/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
取值：

  • collapse：相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

  • separate：默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。

示例：
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容