shadow
box-shadow: x y axis offset axis offset (blur radius, the radius of the extended shadow, color, projection)
Refers to fuzzy blur radius size of the shadow, the pixel size to cover
It refers to the size of the shadow radial extension h
Projection means within the outer projection or projection
Border background
border-image: url (vertical and horizontal size cut px) (repeat, round, strench)
Linear gradient
background: linear-gradient (direction of the gradient start color, color termination)
gradient: the rate of change, slope
Gradient direction: an angle or English identification
Text overflow ellipsis
In three steps:
1. Set the text does not wrap: white-space: nowrap
2. Set exceeded hidden: overflow: hidden
3. Set ellipsis: text-overflow: ellipsis (ellipsis, clip shear)
Text shadow
text-shadow: x Offset Y Offset px px px blur (to 0) Color
background related css
background-origin
Set background image original position.
background-origin：border-box | padding-box | content-box
And below functionally similar, border-box picture out of position starting at the corner.
padding-box placing images from padding at.
content-box is placed from the image contents (to remove the padding area). As shown below
background-clip
Background clipping (background colors and background images).
background-clip: border-box (the background outside corner cut) | padding-box (minus the background outside the padding) | content-box (minus the background outside of the content)
background-size
Background image size.
background-size: auto | width and height is provided (20px 30px) | cover | contain
auto: do not make any changes.
Wide dynamic master settings: in pixels and percent set.
cover: The background image proportionally fully populated.
contain: Background image scaling to either side of the contact element's border.
Pseudo class selector
before and after use :: get
hover use: Get