代码干燥计划

# padding border margin outline

# 元素宽高 width / height

# width

允许值：<length> | <percentage> | auto

默认值：auto

是否继承：否

# height

允许值：<length> | <percentage> | auto

默认值：auto

是否继承：否

# 内边距 padding

# padding

允许值：[ <length> | <percentage> ]{1,4}

默认值：0

多个值书写顺序为：padding: top right bottom left;。

  • 只写一个值，表示上右下左
  • 只写两个值，上下为第一个值，右左为第二个值。
  • 只写三个值，上为第一个值，右左为第二个值，下为第三个值。

各值分开书写：padding-top, padding-right, padding-bottom, padding-left

注意，设置为百分数值的时候，四个方向的 padding 值全都是相对于父元素的宽度计算。

# 边框 border

# 边框样式 border-style

允许值：[ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]{1,4}

默认值：无

多个值书写顺序为：border-style: top right bottom left;。

单边样式：border-top-style, border-right-style, border-bottom-style, border-left-style，初始值均为 none。

# 边框宽度 border-width

允许值：[ thin | medium | thick | <length> ]{1,4}

默认值：无

多个值书写顺序为：border-width: top right bottom left;。

单边样式：border-top-width, border-right-width, border-bottom-width, border-left-width，初始值均为 medium。

# 边框颜色 border-color

允许值：<color>{1,4}

默认值：currentColor

多个值书写顺序为：border-color: top right bottom left;。

单边样式：border-top-color, border-right-color, border-bottom-color, border-left-color，初始值均为元素 color 值，准确地说是元素 color 的计算值 currentColor。

# 单边简写属性 border-top, border-right, border-bottom, border-left

允许值：[ <border-width> ‖ <border-style> ‖ <border-color> ]

默认值：无

三个值不分顺序。

# 最简写属性 border

允许值：[ <border-width> ‖ <border-style> ‖ <border-color> ]

默认值：同各单独属性

注意，使用 box-decoration-break 属性可以改变行内元素换行后的边框处理方式。

# 圆角边框 border-radius

允许值：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：0

设置 50% 可变为圆形。

设定顺序从左上角开始，顺时针旋转。缺少的值将和 padding 缩写一样，使用对边的值。

设定的百分比就表示要将对应的某一条边的长度弯曲其中的百分之多少。

复杂的圆角，比如想让圆角横向弯曲 30px，纵向弯曲 10px，不能写成 border-radius: 30px 10px。而应该写成 border-radius: 30px / 10px。这就相当于 border-radius: 30px 30px 30px 30px / 10px 10px 10px 10px。斜线之前指定的是圆角的横向半径，斜线之后指定圆角的纵向半径。

# 单独指定一个圆角

单写属性：border-top-left-radius, border-top-right-radius, border-bottomright-radius, border-bottom-left-radius

允许值：[ <length> | <percentage> ]{1,2}

默认值：0

可以设定一个或两个值，两个值的时候，前者表示横向半径，后者表示纵向半径，而不再需要斜线分隔。

# 图像边框 border-image-source

允许值：none | <image>

默认值：none

div{
  border-image-source: url(./1.png)
}
1
2
3

注意，无论设置普通边框还是图像边框，都需要设置 border-style 值，否则默认值为 none 则不会显示边框。

以上属性设置后，指定的图像只会显示在边框的四个角上，原因就在于 border-image-slice 属性。

# 对用作边框的图片的裁剪方式 border-image-slice

允许值：[ <number> | <percentage> ]{1,4} && fill?

默认值：100%

此属性设置对用作边框的一张图像怎么裁剪，四个值分别指定裁剪图片的多少分别用于左上，右上，右下，左下角。四个值同样可以不写完，取值方式同 padding 省略值时相同。

左上，右上，右下，左下角的大小取决于 border-width。也就是由边框宽度重合部分组成的矩形框大小。

div{
  border-image-slice: 100%; /* 左上，右上，右下，左下均取图片的 100%，也就是四个角都将整张图拿来用 */
}

div{
  border-image-slice: 50%; /* 图像将被分成四等份，分别用于 左上，右上，右下，左下  */
}
1
2
3
4
5
6
7

所以默认值 100% 的话四个角就是完全一样的整张图，但为什么只有四个角呢？

因为规范定义：

  • 如果左右两边（第一个和第三个值）取的宽度之和大于或等于图片本身宽度（100%），那么上边框和下边框的中间就是空的。
  • 如果上下两边（第二个和第四个值）取的宽度之和大于或等于图片本身高度（100%），那么左边框和右边框的中间就是空的。

如果设定值为纯数字，则表示对应图片的像素数。border-image-slice: 25; 就表示取 25 像素。

使用纯数字表示，不管图片大小都裁剪相同尺寸，使用百分数，裁剪大小会根据图片尺寸变化。通常使用百分比来指定。


div{
  border-image-slice: 33.33%; /* 左上，右上，右下，左下都裁剪图片的 33% 用于四角边框，未被裁剪的部分用于填满边框  */
}
1
2
3
4

但上例裁剪后，图片正中间的一部分会消失，既没有用作边框四角，也没有用作边框中间部分，而是直接消失不见。

但在末尾添加 fill 关键字后，会将中间那一部分会被绘制到元素的背景区域上，其实，它是在元素已有的背景之上绘制，因此可以用来代替（覆盖）现有的背景。

如果想让图像的尺寸不同于 border-width 的宽度，可使用 border-image-width 属性。

# 边框图像宽度 border-image-width

允许值：[ <length> | <percentage> | <number> | auto ]{1,4}

默认值：1

此属性设定边框图像绘制的宽度，默认的边框图像会使用 border-width 所指定的宽度，设置此属性可让图像绘制的宽度不受 border-width 的限制，可比 border-width 值更大或更小。

值为百分数是相对于整个边框的宽或高来计算。

值为纯数字时是 border-width 的倍数。

div{
  border: 2px solid; /* 边框宽度设为 2px */
  border-image-source: url(stars.gif);
  border-image-width: 12px; /* 边框图像的宽度设定为 12px */
  border-image-slice: 33.3333%; /* 四个角分别裁剪图像的四个角的三分之一大小，填充到 12px 中去 */
}
1
2
3
4
5
6

注意，这里即便把 border-width 的值设置为 0 也可以通过 border-image-width 让边框图像显示出来。利用这一点可以把实线边框作为备用样式，以防止边框图像无法加载时，还可以显示普通边框。比如上例中，如果 12px 宽的图像边框无法加载时，将会显示 2px 宽的实线边框。但是注意要留出足够的空间确保图像正常加载时不会与内容重叠。默认情况下是会重叠的，会在下一节介绍解决办法。如果是依靠 padding 来撑开边框，但当边框图像加载失败时，内容和备用边框之间会留出多余的空白。

和 border-image-slice 的规范类似：

  • 如果左右两边（第一个和第三个值）取的宽度之和大于或等于边框本身宽度（100%），浏览器会按比例减少各值，直到两者值和不大于 100%。
  • 如果上下两边（第二个和第四个值）取的宽度之和大于或等于边框本身高度（100%），浏览器会按比例减少各值，直到两者值和不大于 100%。

因此，一下两个声明得到的结果一样：

div{
  border-image-width: 25% 80% 25% 40%; /* 第一个和第三个值满足相加不大于 100% 的要求 */
  border-image-width: 25% 66.6667% 25% 33.3333%; /* 第二个和第四个值相加大于 100% ，浏览器会按比例缩小到 100% */
}
1
2
3
4

将值设为 auto 时，先取 border-image-slice 的值，没有的话则使用 border-width 的值。

# 图像边框外推（远离内容区） border-image-outset

允许值：[ <length> | <number> ]{1,4}

默认值：0

使用此属性会将图像边框向边框四周往外推。

设为数字值时是相当于 border-width 的倍数。或设置为固定往外推的长度值。

# 调整图像边框上的图像重复方式 border-image-repeat

允许值：[ stretch | repeat | round | space ]{1,2}

默认值：stretch

默认值表示处四角外的边框上，图像会被拉伸到两端。

repeat 表示不拉伸，反复平铺图像，从边框中点开始向两端平铺，两端的图像铺满后会被截断。

round 将各边需要填充的长度除以图片的尺寸，再四舍五入为需要平铺的个数。图片可能会被拉伸或压缩以保证每个图像能相互接触并铺满。

space 同 round 类似，长度除以图片尺寸后，永远向下取整得到平铺个数，然后将它们均匀分布在长度范围内，不需要相互接触。

截止 2017 年末，Chrome 和 Opera 还不支持使用 space 方式重复平铺图像。

# 图像边框的简写方式 border-image

允许值：<border-image-source> ‖ <border-image-slice> [ / <border-image-width> | /<border-image-width>? / <border-image-outset> ]? ‖ <border-image-repeat>

默认值：同各单独属性相同

slice - width - outset 必须按照指定顺序列出，并使用斜线（/）分隔。source 和 repeat 值可以写在任何位置。

# 实例

略

# 轮廓 outline

一般直接绘制在 border 外侧，与 border 的区别：

  • outline 不占空间
  • outline 可以不是矩形
  • 浏览器通常在元素处于 :focus 状态时渲染 outline
  • 无法单独为某一边设置独特的样式

# 轮廓样式 outline-style

允许值：auto | none | solid | dotted | dashed | double | groove | ridge | inset | outset

默认值：none

允许值与 border 相比，少了 hidden，多了 auto。auto 给浏览器留出了自由权。

border-style 四条边的简写属性，但 outline-style 不是，因为CSS只允许统一设置而不允许单独设置一边的 outline 样式。

# 轮廓宽度 outline-width

允许值：<length> | thin | medium | thick

默认值：medium

也不是简写属性，一个值统一设置四边的样式。

# 轮廓颜色 outline-color

允许值：<color> | invert

默认值：invert

默认值表示对轮廓可见部分中的所有像素进行颜色转换。

截止 2017 年只有 Microsoft Edge 和 IE11 支持 invert 值，其他多数浏览器将其当做错误，转而使用默认颜色也就是元素的 color 属性值。

# 轮廓简写属性 outline

允许值：[ <outline-color> ‖ <outline-style> ‖ <outline-width> ]

默认值：none

同时设置 outline 的颜色，样式，宽度，依然不分顺序。

# outline 与 border 的区别

  • outline 对布局完全不会有影响，只是视觉上的效果。

  • 轮廓不一定是矩形，比如在换行后，轮廓会连成一个多边形来包裹这个换行的元素。

截止 2017 年末，部分浏览器不支持连成多边形，而依然是每一行连成一个矩形。

# 外边距 margin

允许值：[ <length> | <percentage> | auto ]{1,4}

默认值：-

百分数依据父元素内容区的宽度计算。四个值和 padding 一样表示 上右下左。

本身默认是没有外边距的，但多数浏览器会自动为元素预设外边距，但只要手动声明了就会覆盖默认的样式。

# 单独设置一边的外边距 margin-top, margin-right, margin-bottom, margin-left

允许值：<length> | <percentage> | auto

默认值：0

# 外边距折叠（合并）

块级框的上下外边距碰在一起会发生合并，并取其中较大值作为最终值。

还有一种情况，当元素是父元素的第一个元素时，为这个子元素设置 margin-top 会将父元素带走：

div{
  background: #aaa;
  p{
    margin-top: 30px;
  }
}
1
2
3
4
5
6

对行内非置换元素而言，上下 margin 不会产生任何影响。左右 margin 则会正常生效。

对行内置换元素而言，则均会生效。

← 颜色 背景 渐变 color background liner-gradient →