Beautification box
1. beautification text
first part:
Font size [font-size]
Meaning: the height of the character box
Inheritable
Default value: medium
The value
Default [understand]
medium: medium font size
larger: large font size
smaller: small font size
Numerical
px [Common]: absolute font size
em [Common]: relative to the font size of the parent element, if there is no parent element, use the standard font size
Standard font size: default font size of the browser settings, usually 16px, you can change
%: Principles with em, such as 200%, the equivalent of 2em, 50%, equivalent to .5em
rem: relative to the reference font size
Bold font] [font-weight
The font-weight [] [bold] is set to make text bold, the inheritable property
Italic font] [font-style
The font-style [] to [] italic, oblique to the text, the inheritable property
Word spacing letter-spacing []
Letter-spacing [] set value or EM px, can control the gap between the text, the inheritable property
First line indent text-indent []
You can achieve the first indent text backwards
To dash [text] text-decoration
Set] [text-decoration attribute, the text to be crossed
the second part:
[Modified first letter pseudo-element selector :: first-letter]
[] :: first-letter in the first text optional elements
[Modified first line pseudo-element selector :: first-line]
[Optional] :: first-line elements in the first line of text
Modification of selected text [pseudo-element selector :: selection]
[Optional] :: selection marquee in the user text
Font type
Concept: serif and sans serif fonts
Change font type [font-family]
Use [] @ font-face instruction to load web fonts
Use the font icon
2. beautify the border
Rounded borders [border-radius]
Schematic rounded borders
Rounded corners using common scene
Ordinary rounded borders
Round border
Round Pictures
3. beautify background
Background
Background-image using [] set the background image
Use background-repeat] [repeat mode Picture
repeat: [defaults] repeated from left to right from top to bottom
no-repeat: Unique
repeat-x: repeated only in the x-axis direction
repeat-y: repeated only in the y-axis direction
[Background-position] using the set location on the border box
default value
left、right、top、bottom、center
Numerical
Value can be achieved using a partial image from the acquired FIG Sprite (the Sprite) in
Examples
] Using {background-size background image size setting
default value
Numerical
Using {background-attachment fixed background] FIG.
scroll: [Default] FIG follower element moving BACKGROUND
fixed: fixed background
Use sketch a unified set of attributes [background]
background: background image position / size of the repeat mode is fixed background color
Using multiple background
Background gradient
Linear gradient: {background-image: linear-gradient (...)]
background-image:
linear-gradient(to right, red, blue);
A radial gradient (gradient circle): [background-image: radial-gradient (...)]
background-image:
radial-gradient(lightblue, black)
4. Transparency and mouse style
Transparency [ opacity ] and alpha channels
[Use] opacity property,
the transparency of the whole box adjustable
range for this property is from 0 to 1
where 0 represents a completely transparent and completely opaque 1
Use rgba color, a color adjustable transparency,
rgba respectively: r: red, g: green , b: blue, a: alpha
writing format: rgba (red, green, blue , alpha)
where, alpha denotes a transparent channel, the value is between 0 ~ 1
0 represents full transparency, 1 is fully opaque
may also be expressed in hexadecimal, e.g. rgba (0,0,0,0.5) can be written as # 00000080
Mouse style
cursor: auto defaults
cursor: crosshair cruciform
cursor:default
cursor:move
cursor:e-resize
cursor:ne-resize
cursor:nw-resize
cursor:n-resize
cursor:se-resize
cursor:sw-resize
cursor:s-resize
cursor:w-resize
cursor:text
cursor:wait
cursor: helpcursor: pointer default style browser setting a value of the element
cursor: url (imgs / target.ico) , auto
indicate the use of a mouse icon to represent the style
note, an icon or the file format is best ico cur, to avoid not appear in some browsers
addition, the size of the control icon within 32 * 32
5. Shadow
[Text shadow text-shadow]
text-shadow: 2px 2px 4px rgba(0,0,0,.5)
First parameter: 2px, it indicates the position of the shadow offset to the x-axis direction (abscissa) is 2px
The first two parameters: 2px, hatching indicating a position offset to the y-axis direction (abscissa) is 2px
The first three parameters: 4px, represents the shadow blur radius, the larger the value, the more blurred shadows
The first four parameters: rgba (0,0,0, .5), represents the color shade
Shadow box-shadow box []
box-shadow: 4px 5px 6px rgba(0,0,0,.5)
Usage box-shadow and text-shadow is very similar
Its four parameters respectively represent: offset x-axis, y-axis offset, the radius of blur, shadow color
box-shadow: 4px 5px 6px 7px rgba(0,0,0,.5)
More than one parameter, the last 7px represents shadow diffusion radius, the larger the value, the larger the shadow
box-shadow: 0px 0px 6px 7px rgba(0,0,0,.5)
This embodiment can be made using a diffusion box as in the center of the shadow
box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.5)
Add inset keywords, the diffusion direction of the shadow can be changed by outside inwards