外观

# 综合

# color

color: <前景色> 继承

• 颜色值

# opacity

opacity: <透明度>

• 数值：0~1
• 百分值

# box-shadow

box-shadow: [<阴影水平偏移距离> <阴影垂直偏移距离> <阴影模糊距离> <阴影延伸半径> <阴影颜色> <阴影内嵌>]#

阴影水平偏移距离

• 长度值：正值向右偏移，负值向左偏移

阴影垂直偏移距离

• 长度值：正值向下偏移，负值向上偏移

阴影模糊距离

• 长度值

阴影延伸半径

• 长度值

阴影颜色

• 颜色值

阴影内嵌

• inset：内嵌
• 空：不内嵌

# 背景

# background-color

background-color: <背景色>

• 颜色值

# background-image

background-image: <背景图>,#

• none：无 默认值
• 图像值

# background-repeat

background-repeat: <背景图重复方式>,#

• no-repeat：不重复
• repeat：重复 默认值（容易截断）
• repeat-x：水平方向重复，垂直方向不重复
• repeat-y：垂直方向重复，水平方向不重复
• space：重复，调整间距保证不截断
• round：重复，伸缩图片保证不截断

# background-position

background-position: [<背景图水平定位> <背景图垂直定位>?,]#

背景图水平定位

• center：中间
• left：最左边 默认值
• right：最右边
• left <长度值|百分值>：左边偏移
• right <长度值|百分值>：右边偏移
• 长度值：左边偏移
• 百分值：左边偏移，相对于自身宽度

背景图垂直定位

• center：中间
• top：最上边 默认值
• bottom：最下边
• top <长度值|百分值>：上边偏移
• bottom <长度值|百分值>：下边偏移
• 长度值：上边偏移
• 百分值：上边偏移，相对于自身高度

# background-size

background-size: <背景图尺寸>,#

• auto：原尺寸 默认值
• contain：等比缩放放入容器
• cover：等比缩放覆盖容器
• 长度值：指定图片宽度，图片高度保持等比缩放
• 百分值：指定图片宽度，图片高度保持等比缩放。图片宽度相对于自身宽度
• 长度值 长度值：分别指定图片宽度和高度
• 百分值 百分值：分别指定图片宽度和高度。图片宽度相对于自身宽度，图片高度相对于自身高度

# background-attachment

background-attachment: <背景图附着方式>,#

• scroll：附着在元素本身 默认值
• fixed：附着在视口（元素外部滚动，元素移动，背景不动）
• local：附着在元素内容（元素内容滚动，元素不动，背景移动，兼容性不好）

background-attachment - CSS（层叠样式表） | MDN (mozilla.org)open in new window

# background-origin

background-origin: <背景图原点区域>,#

• border-box：边框盒
• padding-box：内边距盒 默认值
• content-box：内容盒

# background-clip

background-clip: <背景图裁剪区域>,#

• border-box：边框盒 默认值
• padding-box：内边距盒
• content-box：内容盒

# -webkit-background-clip

-webkit-background-clip: <背景图裁剪区域>,#

• border-box：边框盒 默认值
• padding-box：内边距盒
• content-box：内容盒
• text：文本

# background-blend-mode

background-blend-mode: <混色模式>,#

• normal：正常模式
• multiply：正片叠底模式
• screen：滤色模式
• overlay：叠加模式
• darken：变暗模式
• lighten：变亮模式
• color-dodge：颜色减淡模式
• color-burn：颜色加深模式
• hard-light：强光模式
• soft-light：柔光模式
• difference ：差值模式
• exclusion：排除模式
• hue：色相模式
• saturation：饱和度模式
• color：颜色模式
• luminosity：亮度模式

不可思议的混合模式 background-blend-modeopen in new window

# background

background: [<background-color> <background-image> <background-repeat> <background-position> / <background-size>,]#

# 轮廓

# outline-width

outline-width: <轮廓宽度>

• thin ：薄
• medium ：中
• thick：厚
• 长度值

# outline-style

outline-style: <轮廓样式>

• none：无 默认值
• solid：实线
• dashed：破折线
• dotted：圆点线
• ridge：脊线
• groove：槽线
• inset：内嵌
• outset：外凸
• double：双线

# outline-color

outline-color: <轮廓颜色>

• 颜色值

# outline-offset

outline-offset: <轮廓偏移距离>

• 长度值

# outline

outline: <outline-width> || <outline-style> || <outline-color>

# 边框

# border-top-width

border-top-width: <上边框宽度>

• thin ：薄
• medium ：中
• thick：厚
• 长度值

# border-bottom-width

border-bottom-width: <下边框宽度>

• 同 border-top-width

# border-left-width

border-left-width: <左边框宽度>

• 同 border-top-width

# border-right-width

border-right-width: <右边框宽度>

• 同 border-top-width

# border-width

border-width: <border-top-width> <border-right-width>? <border-bottom-width>? <border-left-width>?

上右下左省略规则

# border-top-style

border-top-style: <上边框样式>

• none：无 默认值
• solid：实线
• dashed：破折线
• dotted：圆点线
• ridge：脊线
• groove：槽线
• inset：内嵌
• outset：外凸
• double：双线

# border-bottom-style

边框der-bottom-style: <下边框样式>`

• 同 border-top-style

# border-left-style

border-left-style: <左边框样式>

• 同 border-top-style

# border-right-style

border-right-style: <右边框样式>

• 同 border-top-style

# border-style

border-style: <border-top-style> <border-right-style>? <border-bottom-style>? <border-left-style>?

上右下左省略规则

# border-top-color

border-top-color: <上边框颜色>

• 颜色值

# border-bottom-color

border-bottom-color: 下上边框颜色>

• 颜色值

# border-left-color

border-top-color: <左边框颜色>

• 颜色值

# border-right-color

border-right-color: <右边框颜色>

• 颜色值

# border-color

border-color: <border-top-color> <border-right-color>? <border-bottom-color>? <border-left-color>?

上右下左省略规则

# border-top

border-top: <border-top-width> || <border-top-style> || <border-top-color>

# border-bottom

border-bottom: <border-bottom-width> || <border-bottom-style> || <border-bottom-color>

# border-left

border-left: <border-left-width> || <border-left-style> || <border-left-color>

# border-right

border-right: <border-right-width> || <border-right-style> || <border-right-color>

# border

border: <border-width> || <border-style> || <border-color>

# border-image-source

border-image-source: <边框图片路径>

• none：无 默认值
• 图像值

# border-image-slice

border-image-slice: <上剪切距离> <右剪切距离> <下剪切距离> <左剪切距离> <填充>

剪切距离

• 数值
• 百分值：上下剪切距离相对于图片高度，左右剪切距离相对于图片宽度

填充

• fill：填充中间
• 空：不填充中间

上右下左省略规则

# border-image-width

border-image-width: <上边框宽度> <右边框宽度> <下边框宽度> <左边框宽度>

• 数值：表示 border-width 的倍数，1 默认值
• 长度值
• 百分值：上下边框相对于自身高度，左右边框相对于自身宽度

# border-image-outset

border-image-outset: <上边框外偏移> <右边框外偏移> <下边框外偏移> <左边框外偏移>

• 数值：表示 border-width 的倍数，0 默认值
• 长度值

# border-image-repeat

border-image-repeat: <边框图片重复方式>

• stretch： 不重复，伸缩图片保证不截断并铺满 默认值
• repeat： 重复（容易截断）
• space： 重复，调整间距保证不截断
• round： 重复，伸缩图片保证不截断

# border-image

border-image: <border-image-source> <border-image-slice> <border-image-width> <border-image-outset> <border-image-repeat>

# 圆角

# border-top-left-radius

border-top-left-radius: <左上角水平垂直半径> | <左上角水平半径> <左上角垂直半径>

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高

# border-top-right-radius

border-top-right-radius: <右上角水平垂直半径> | <右上角水平半径> <右上角垂直半径>

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高

# border-bottom-left-radius

border-bottom-left-radius: <左下角水平垂直半径> | <左下角水平半径> <左下角垂直半径>

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高

# border-bottom-right-radius

border-bottom-right-radius: <右下角水平垂直半径> | <右下角水平半径> <右下角垂直半径>

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高

# border-radius

border-radius: <水平垂直半径>{4} | [<水平半径>{4} / <垂直半径>{4}]

• 长度值
• 百分值：水平半径相对于宽，垂直半径相对于高