是 flex-direction 和 flex-wrap 的缩写形式。
Shorthand property for list-style-type list-style-image and list-style-position.
Shorthand property for font-style font-variant font-weight font-size line-height and font-family.
Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.
Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.
Only animation-duration and animation-name are required.
Defines the width of the element's outlines.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | outline-width: medium;
35 |
Defines the width of all outlines to medium.
38 | 39 |
53 |
54 |
55 | outline-width: 1px;
56 |
Defines the width of all outlines to 1px.
59 | 60 |Defines the width of the element's borders.
21 | 22 |
34 |
35 |
36 | border-width: 1px;
37 |
Defines the width of all borders to 1px.
40 | 41 |
55 |
56 |
57 | border-width: 2px 0;
58 |
Defines the top and bottom borders to 2px, the left and right to 0.
61 | 62 |Defines how the text content of the element is decorated.
21 | 22 |
33 | 默认属性
34 |
35 |
36 | text-decoration: none;
37 |
Removes any text decoration.
40 | 41 |
55 |
56 |
57 | text-decoration: underline;
58 |
Underlines the text content.
61 | 62 |46 | cssreference.parryqiu.com 是一个免费的 CSS 可视化文档 47 |
48 |文档使用了大量的可视化图形以及动画对属性进行了解释
49 |50 | 项目 fork 于 cssreference.io，翻译成中文的工作正在进行中 51 |
52 |53 | [2017-01-08] Flexbox 的部分已完成 54 |
55 |Defines which glyph to use for each letter.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | font-variant: normal;
38 |
Each letter uses its normal glyph.
41 | 42 |
56 |
57 |
58 | font-variant: small-caps;
59 |
Each letter uses its small capitalized version.
62 | 63 |Like border-width, but for the top border only.
34 | 默认属性
35 |
36 |
37 | border-top-width: 0;
38 |
Removes the top border.
41 | 42 |
56 |
57 |
58 | border-top-width: 4px;
59 |
You can use pixel values.
62 | 63 |Defines if words should break when reaching the end of a line.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | overflow-wrap: normal;
35 |
Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.
38 | 39 |
53 |
54 |
55 | overflow-wrap: break-word;
56 |
Words with no space will break as soon as they reach the end of a line.
59 | 60 |Like border-width, but for the left border only.
34 | 默认属性
35 |
36 |
37 | border-left-width: 0;
38 |
Removes the left border.
41 | 42 |
56 |
57 |
58 | border-left-width: 4px;
59 |
You can use pixel values.
62 | 63 |Shorthand property for border-width border-style and border-color.
30 |
31 |
32 | border: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | border: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |Like border-width, but for the right border only.
34 | 默认属性
35 |
36 |
37 | border-right-width: 0;
38 |
Removes the right border.
41 | 42 |
56 |
57 |
58 | border-right-width: 4px;
59 |
You can use pixel values.
62 | 63 |Shorthand property for outline-width outline-style and outline-color.
30 |
31 |
32 | outline: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | outline: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |Like border-width, but for the bottom border only.
34 | 默认属性
35 |
36 |
37 | border-bottom-width: 0;
38 |
Removes the bottom border.
41 | 42 |
56 |
57 |
58 | border-bottom-width: 4px;
59 |
You can use pixel values.
62 | 63 |Defines the number of columns of the element.
18 | 19 |
30 | 默认属性
31 |
32 |
33 | column-count: auto;
34 |
Removes any columns from the element (unless another column- property was set).
52 |
53 |
54 | column-count: 3;
55 |
When using an integer value, the element will distribute its child elements across the number of columns defined.
58 | 59 |Defines how words should break when reaching the end of a line.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | word-break: normal;
38 |
Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.
41 | 42 |
56 |
57 |
58 | word-break: break-all;
59 |
Words with no space will break as soon as they reach the end of a line.
62 | 63 |定义 flexbox 的初始化大小。
15 | 16 |
28 | 默认属性
29 |
30 |
31 | flex-basis: auto;
32 |
元素根据自身的内容自动调整大小，或者根据已定义的 高度 或 宽度 调整大小。
51 |
52 |
53 | flex-basis: 80px;
54 |
你可以定义 pixel 或 (r)em 值。元素将换行其内容避开任何的元素溢出。
57 | 58 |Shorthand property for border-top-width border-top-style and border-top-color.
30 |
31 |
32 | border-top: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | border-top: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |Shorthand property for border-left-width border-left-style and border-left-color.
30 |
31 |
32 | border-left: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | border-left: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |Shorthand property for border-right-width border-right-style and border-right-color.
30 |
31 |
32 | border-right: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | border-right: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |在 CSS 中可{{page.description}}
38 |Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.
30 |
31 |
32 | border-bottom: 4px dotted red;
33 |
The order is important:
36 |
51 |
52 |
53 | border-bottom: 2px solid;
54 |
Only the color is optional. If you omit it, the color applied will be the color of the text.
57 | 58 |Defines the gap between the columns of the element.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | column-gap: normal;
35 |
The gap between the columns is set to the browser's default value, which usually is 1em.
38 | 39 |
53 |
54 |
55 | column-gap: 2px;
56 |
You can use pixel values for the gap.
59 |Note that the gap only appears between columns, and not on the exterior sides of the edge columns.
60 | 61 |Defines the number of columns of the element.
18 | 19 |
30 | 默认属性
31 |
32 |
33 | column-width: auto;
34 |
The element will not distribute its child elements into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.
52 |
53 |
54 | column-width: 10px;
55 |
You can use pixel values for the column width.
58 |The number of columns will be the minimum needed to distribute all the content across the element.
59 | 60 |Defines how the hidden text content behaves if it's overflowing.
21 | 22 |
35 | 默认属性
36 |
37 |
38 | text-overflow: clip;
39 |
The text content is clipped and not accessible.
42 | 43 |
58 |
59 |
60 | text-overflow: ellipsis;
61 |
The overflowing content is replaced by an ellipsis: …
Defines the image to be used as an list item's bullet point.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | list-style-image: none;
35 |
The list items will use the bullet point defined by the list-style-type value, which by default is a disc.
53 |
54 |
55 | list-style-image: url(/images/list-style-image.png);
56 |
The list items will use the image located at the specified URL as their bullet point.
The image can not be resized.
Defines how opaque the element is.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | opacity: 1;
35 |
The element is fully opaque.
38 | 39 |
52 |
53 |
54 | opacity: 0;
55 |
The element is fully transparent.
58 | 59 |
73 |
74 |
75 | opacity: 0.3;
76 |
Any value between 0 (zero) and 1 (one) will make the element semi transparent.
79 | 80 |Defines how the background image will behave when scrolling the page.
21 | 22 |
35 | 默认属性
36 |
37 |
38 | background-attachment: scroll;
39 |
The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.
42 | 43 |
57 |
58 |
59 | background-attachment: fixed;
60 |
The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.
63 | 64 |Defines if the element reacts to pointer events or not.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | pointer-events: auto;
35 |
The element reacts to pointer events, like :hover or click.
53 |
54 |
55 | pointer-events: none;
56 |
The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.
Defines how much the text is slanted.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | font-style: normal;
38 |
The text is not slanted.
41 | 42 |
56 |
57 |
58 | font-style: italic;
59 |
Use the italic version of the font: the letters are slightly slanted.
62 | 63 |
77 |
78 |
79 | font-style: oblique;
80 |
Use the oblique version of the font: the letters are more slanted than italic.
83 | 84 |Defines the spacing between words of a block of text.
21 | 22 |
33 | 默认属性
34 |
35 |
36 | word-spacing: normal;
37 |
The spacing between the characters is normal.
40 | 41 |
55 |
56 |
57 | word-spacing: 5px;
58 |
You can use pixel values.
61 | 62 |
76 |
77 |
78 | word-spacing: 2em;
79 |
You can use em values: this allows the spacing to remain relative to the font-size.
82 | 83 |Defines the spacing between the characters of a block of text.
21 | 22 |
33 | 默认属性
34 |
35 |
36 | letter-spacing: normal;
37 |
The spacing between the characters is normal.
40 | 41 |
55 |
56 |
57 | letter-spacing: 2px;
58 |
You can use pixel values.
61 | 62 |
76 |
77 |
78 | letter-spacing: 0.1em;
79 |
You can use em values: this allows the spacing to remain relative to the font-size.
82 | 83 |Defines the height of the element.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | height: auto;
38 |
The element will automatically adjust its height to allow its content to be displayed correctly.
41 | 42 |
55 |
56 |
57 | height: 100px;
58 |
You can use numeric values like pixels, (r)em, percentages...
61 |If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.
Defines the minimum width of the element.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | min-width: 0;
38 |
The element has no minimum width.
41 | 42 |
55 |
56 |
57 | min-width: 300px;
58 |
You can use numeric values like pixels, (r)em, percentages...
61 |If the minimum width is larger than the element's actual width, the min width will be applied.
62 | 63 |
77 |
78 |
79 | min-width: 5px;
80 |
If the minimum width is smaller than the element's actual width, the min width has no effect.
83 | 84 |Like border-color, but for the top border only.
31 |
32 |
33 | border-top-color: transparent;
34 |
Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.
52 |
53 |
54 | border-top-color: red;
55 |
You can use one of the 140+ color names.
58 | 59 |
73 |
74 |
75 | border-top-color: #05ffb0;
76 |
You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...
Like border-color, but for the left border only.
31 |
32 |
33 | border-left-color: transparent;
34 |
Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.
52 |
53 |
54 | border-left-color: red;
55 |
You can use one of the 140+ color names.
58 | 59 |
73 |
74 |
75 | border-left-color: #05ffb0;
76 |
You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...
Like border-color, but for the right border only.
31 |
32 |
33 | border-right-color: transparent;
34 |
Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.
52 |
53 |
54 | border-right-color: red;
55 |
You can use one of the 140+ color names.
58 | 59 |
73 |
74 |
75 | border-right-color: #05ffb0;
76 |
You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...
Defines how far the background should extend within the element.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | background-clip: border-box;
38 |
The background extends completely throughout the element, even under the border.
41 | 42 |
56 |
57 |
58 | background-clip: padding-box;
59 |
The background only extends to the edge of the border: it includes the padding but not the border.
62 | 63 |
77 |
78 |
79 | background-clip: content-box;
80 |
The background only extends to the edge of the content: it doesn't include the padding, nor the border.
83 | 84 |Like border-color, but for the bottom border only.
31 |
32 |
33 | border-bottom-color: transparent;
34 |
Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.
52 |
53 |
54 | border-bottom-color: red;
55 |
You can use one of the 140+ color names.
58 | 59 |
73 |
74 |
75 | border-bottom-color: #05ffb0;
76 |
You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...
Defines whether table borders should be separated or collapsed.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | border-collapse: separate;
35 |
Each table cell will display its own borders.
38 |In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.
55 |
56 |
57 | border-collapse: collapse;
58 |
Adjacent table cells will merge their borders together.
61 |The cell that appears first in the code will "win": its borders will mask those of the following cells.
62 | 63 |Defines the position of a list's bullet points.
18 | 19 |
31 | 默认属性
32 |
33 |
34 | list-style-position: outside;
35 |
The bullet point will be outside the list item, as if it wasn't part of the list item.
38 |The start of each line of a list item will be aligned vertically.
39 | 40 |
55 |
56 |
57 | list-style-position: inside;
58 |
The bullet point will be inside the list item.
61 |As it is part of the list item, it will be part of the text and push the text at the start.
62 | 63 |Defines the origin of the background image.
21 | 22 |
35 | 默认属性
36 |
37 |
38 | background-origin: padding-box;
39 |
The background image starts at the edge of the border: within padding but not the border.
42 | 43 |
57 |
58 |
59 | background-origin: border-box;
60 |
The background image starts under the border.
63 | 64 |
78 |
79 |
80 | background-origin: content-box;
81 |
The background image only starts at the edge of the content: it doesn't include the padding, nor the border.
84 | 85 |Defines the position of the background image.
21 | 22 |
34 | 默认属性
35 |
36 |
37 | background-position: 0% 0%;
38 |
The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.
41 | 42 |
56 |
57 |
58 | background-position: bottom right;
59 |
You can use a combination of position keywords: center, top, bottom, left and right.
77 |
78 |
79 | background-position: center center;
80 |
The background image will be positioned in the center of the element.
83 | 84 |Defines if an animation is playing or not.
22 | 23 |
39 | 默认属性
40 |
41 |
42 | animation-play-state: running;
43 |
If the animation-duration and animation-name are defined, the animation will start playing automatically.
61 |
62 |
63 | animation-play-state: paused;
64 |
The animation is set paused at the first keyframe.
67 |This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.
In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.
@keyframes fadeAndMove {
70 | from {
71 | opacity: 0;
72 | transform: translateX(0);
73 | }
74 | to {
75 | opacity: 0;
76 | transform: translateX(100px);
77 | }
78 | }
79 |
80 |