First, CSS3 Background property list
- Background
- Background-color
- Background-image
- Background-repeat
- Background-attatchment
- Background-position
- Background-origin
- Background-clip
- Background-size
1.CSS3 Background Origin Property
background-origin- Sets or retrieves the
background-position reference Origin location when the object's background image is computed
- IE8 Firefox3.5 not supported
Value:
2.CSS3 Trimming Properties
background-clip- Sets the area of the object's background image to be cropped outward
- IE8 Firefox3.5 not supported
- Value:
- Padding-box: The background is cropped from the padding area (excluding padding).
- Border-box: Default value, starting from the border area (without border) to crop the background outward
- Content-box: Start cropping the background from the content area
- Text: The
加私有前缀-webkit- shape of the foreground content, such as the article, is cropped out as a clipping area, so that you can use the background as a matte effect such as a fill color ( 图片显示在文字上 which needs to be set color:transparent )
3.CSS3 Background Dimension Properties
background-size- Retrieves or sets the size of the background image of an object
- If you provide two, the first defines the width of the background image, and the second defines the height of the background image.
- If you provide only one, the value will be used to define the width of the background image, and the 2nd value defaults to auto, which is the height of auto, at which time the background graph is scaled as a reference to the provided width
- Value:
- Length: Specifies the size of the background image with a long value. Negative values are not allowed.
- Percentage: Specifies the background image size in percent. Negative values are not allowed.
- Auto: True size of background image
- Cover: The background image is scaled to a fully covered container, and the background image may be out of the container
- Contain: The background image is always included in the container, such that the background image is equal to or greater than the width or height of the container.
4.CSS3 Multi-background properties
- Background
Value:
background-image:url("../../dist/images/bg-tl.png"), url("../../dist/images/bg-tr.png"), url("../../dist/images/bg-bl.png"), url("../../dist/images/bg-br.png");background-repeat:no-repeat;background-position:0px 0px, 100% 0px, 0px 100%, 100% 100%;background: url("../../dist/images/bg-tl.png") no-repeat 0px 0px, url("../../dist/images/bg-tr.png") no-repeat 100% 0px, url("../../dist/images/bg-bl.png") no-repeat 0px 100%, url("../../dist/images/bg-br.png") no-repeat 100% 100%;
Second, CSS3 border 1. Right angle border
border- Border-width
- Border-style
- Border-color
- Border-left
- Border-right
- Border-top
- Border-bottom2. Rounded border
border-radius
3. Box Shadows
box-shadow- Multiple sets of shadows can be set at the same time, each set of parameter values separated by commas
- Value None: No Shadow
box-shadow：水平 垂直 模糊度（必须写在颜色前面） 阴影外延宽度 颜色 内阴影（inset）默认为外阴影
4. Picture border
border-image
- A composite property that sets or retrieves the border style of an object using an image to fill
border-image-source
- Set or retrieve the border style of an object using an image path
- Value URL
border-image-slice
- Sets or retrieves the way the border background of an object is split (set to each corner)
- Value: Floating point/percentage
border-image-width
- Set or retrieve the border thickness of an object
- Value: Length value/percent/floating point number
border-image-outset
- Sets or retrieves the extension of the bounding background of an object, spreading outwards without occupying a position
- Length value/floating point number (negative values are not allowed)
border-image-repeat
- Sets or retrieves the tiling of an object's border image
- Value
- Stretch: Specifies that the border background is filled with stretch (default)
- Repeat: Specifies that the border background map is populated with tiling. When the picture touches the border, it is truncated if it is exceeded
- Round: Specifies that the border background map is populated with tiling. The picture dynamically adjusts the size of the picture according to the size of the border until it fills the entire frame.
- Space: Specifies a tiled way to fill the border background. The picture dynamically adjusts the spacing between the pictures according to the dimensions of the border until the entire border is exactly covered. Comprehensive write: Border-image:source Slice/width/outset Repeat for example: border-image-slice:27; Border-image-repeat:space; Border-image:url ("imgs/avatar.jpg") 33%/50px/10px stretch;
Border-colors
5. Reflection of the box
Third, CSS3 text 1.CSS3 text Shadow properties
text-shadow- Sets or retrieves whether text in an object has a shadow or blur effect, refer to the Box-shadow property
- Multiple sets of effects can be set, each set of parameter values
逗号 separated. Multiple sets of shadow special effects, Demo: Flame text, neon text
- Ie6~9 Firefox does not support,
text-shadow:none|长度1 长度2 长度3 color
- None: Shadow not set
- Length 1: Sets the shadow horizontal offset value of the object. Can be a negative value
- Length 2: Sets the shadow vertical offset of the object. Can be a negative value
- Length 3: Sets the shadow blur value of the object.
不允许负值
- Color: Shadow color for objects such as: text-shadow:1px 0px 0px rgb (188,188,188), 2px 0px 0px rgb (177,177,177), 3px 0px 0px rgb (166,166,166), 4p x 0px 0px rgb (155,155,155), 5px 0px 0px rgb (144,144,144);
2.css3 Overflow Text Property
text-overflow- When the block container overflow is non-visible, defines whether inline content overflows its block container for truncation or addition
... and custom characters
- Ie6~9 Firefox does not support
- Value:
clip: Default value, when inline content overflows the block container, cuts out the overflow partellipsis: When inline content overflows the block container, replace the overflow part with the...
- To make Text-overflow effective, you must have the following prerequisites:
- 1.overflow:hidden;
- 2.white-space:nowrap;
- 3.width is non-auto value for example: P:nth-of-type (6) {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
3.CSS3 Text line Wrapping
word-wrap
- Sets or retrieves whether the line wraps when the content exceeds the bounds of the specified container
- CSS3 renamed Word-wrap to
overflow-wrap
- Value:
- Normal: Allow content to open or overflow specified container boundaries
- Break-word: Content will be wrapped within the boundary. Break the word internally if needed
word-break
- Sets or retrieves the word wrap behavior of text within an object
- The Break-all attribute value should be used to resolve a long character break layout that prevents consecutive meaningless occurrences in the page;
Value:
- Normal: Allows line wrapping in words according to the text rules in Asian and non-Asian languages.
- Keep-all: Asian texts are constantly on the line and English is constantly in line with the same normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed.
Break-all: The Asian text and English are all breaking, and the behavior is the same as in Asian languages. Also allows non-Asian text lines within any word to be disconnected. This value is suitable for Asian text that contains some non-Asian text, such as keeping consecutive English letters open.
对比：word-wrap:单词太长会提前换行word-break:单词太长不会提前换行，而是在超出范围时，把单词截断换行
white-space
- Set or retrieve the handling of spaces within an object
- Value:
- Normal: Default processing mode
- Pre: Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds
- NoWrap: Forces all text to be displayed in the same row, merging extra white space between text until the end of the text or encountering a BR object
- Pre-wrap: Displays preformatted text in equal-width font, does not merge between text
空白距离 , and breaks when text touches the boundary.
- Pre-line: Keeps text wrapped,
不保留文字间的空白距离 wrapping occurs when text touches a boundary
4.CSS3 text Decoration
text-decoration
text-decoration-line
- Value:
- None: Specifies that the text is not decorated
- Underline: The decoration of the specified text is underlined
- Overline: The decoration of the specified text is underlined
- Line-through: The decoration of the specified text is a penetrating line
- Blink: The decoration of the specified text is blinking
text-decoration-style
- Shape of text trim lines
- Value:
- Solid: Solid Line
- Double: two-wire
- Dotted: dot-like line
- Dashed: Dashed line
- Wavy: Wavy Line
text-decoration-color
text-decoration-skip
- Text trim lines must be skipped over which parts of the content
text-underline-position
- Sets the position of an underscore in an object
5.css3 text strokes (WebKit only)
text-fill-color
- Specify fill color for text
text-stroke
- Specify the stroke of text
- text-stroke:width| | Color
text-strokw-width
- Specify the stroke thickness of text
text-stroke-color
- Specifies the stroke color of text
6. Other Text properties
text-transform
- Sets or retrieves the case of text in an object
- Ie6~11 firefox2~18 chrome4~45 safari6~8 opera15~29 not supported
- Value
- None: No conversion
- Capitalize: Converts the first letter of each word to uppercase
- UPPERCSE: Convert each word to uppercase
- Lowercase: convert each word to lowercase
- Full-width: Converts all characters to fullwidth form. If the character does not have a corresponding fullwidth form, it will be left intact
-
tab-size
- retrieving or setting the length of a tab in an object
- firefox4~40 chrome21+ safari6.1+ Opera support
This property determines the width of the tab (U+0009), and the integer represents a multiple of the space (u+0020)
- such as: Tab-size:4 (indicates that the tab width is a width of 4 spaces)
-
The definition of this property is valid only if the property value of White-space is: pre|pre-wrap
- integer: Specifies the length of the tab with an integer. Negative values are not allowed
- Length: Specifies the length of a tab with a length value. Negative values are not allowed
text-align
- Sets or retrieves the horizontal alignment of content in an object
- The text of a block-level element is some stacked wireframe
- Most browsers want to make text-align justify to be effective, you need to insert a blank between the characters, such as spaces
- The last line of text in the fast, and the line that is forced to break, justify using Text-align-last
- Under IE, if text-align-last is to take effect, you must first define text-align as justify
- Value:
- Left: content to justify
- Center: Center Alignment
- Right: Justify
- Justify: (browser not supported) justified, but not processed for lines that are forcibly interrupted and the last line, including only one line of text.
- Start: Content Snap to start boundary
- End: Content-aligned end boundary
- Match-parent: (Browser not supported) This value is consistent with inherit, except that the start or end keyword inherited by this value is calculated for the parent's direction value, and the computed value can be left and right
- Justify-all: The effect is equivalent to justify, but it also aligns the last line,
text-align-last
- Only te6.0+ firefox12~37 support
- Sets or retrieves the last row within a block, including the case where there is only one line of text within the block, which is both the first and last line, or the alignment of the row that is forced to break
text-justify
- Sets or retrieves the alignment used for adjusting text within an object
- Only IE6~11 support
- Because this property affects the layout of the text, text-align must be set to justify
text-size-adjust
- Retrieves or sets the resizing of object text in a mobile page
- This property only takes effect on mobile devices
- Only iOS Safari support
- This property definition is invalid if the page does not have a meta viewport defined
- Value:
- Auto: Text size adjusts to device size
- None: The text size is not adjusted according to the device size ·
- Percentage: Use percentages to specify how the text size adjusts when the device size is different.
CSS background-borders-text
