frame:
Box fillet: border-radius: 5px / 20%;
border-radius: 5px 4px 3px 2px; upper left, upper right, lower right, lower left.
Shadow Box:
box-shadow：
box-shadow: x y axis offset axis offset shadow blur radius (the degree of blurring of the shadow color) radius shadow color shading extended projection
Note: inset within the shadow box means, in an external default, the inset from a first written one or the last parameter position, other locations are invalid.
When the values are 3, a left side distance from the upper side, the shadow color;
When four values are, from a left side, from the upper side of the virtual pixel, shadow color;
When values are 5, from a left side, from the upper side of the virtual pixel, shadow color, whether color display is inverted and the interior;
Negative value, in the opposite direction.
background:
Introduction: background-image
BACKGROUND Size: background-size
auto: default value, does not change the size of the picture
Length value: 200px 50px width representative of a high order is 20,050.
Percentage: same length value
cover: filling the entire outer container
Tile background: background-repeat
Background-position:
Position location 1 (background-origin):
The text position: content-box,
According to the position of the border: border-box,
The padding position: padding-box,
Using this property, you must set the background for the no-repeat.
Location Positioning 2 (background-position): top, right, bottom, left, background-position: distance from the left and right how much
Multiple BACKGROUND: comma separated: background-image: url (images / bg_flower.gif), url (images / border.png); background-repeat: no-repeat.
Font:
Text Shadow :
text-shadow: three values: the left represent the distance from the upper side, it displays text shadow color shading.
text-shadow: four values: the left represent the distance from the upper side, the degree of blurring and color shading.
Text overflow property :
overflow: hidden; white-space: nowrap; so that the text does not wrap first set to force these two properties.
text-overflow: clip: trim text
Custom (string): define your own symbols to represent a given string of text to be trimmed.
Wrap text attributes:
word-break:
word-break: break-all: its contents will wrap to 200px,
if the end of the line there is a long English words (Congratulation, etc.),
it will truncate the word, into the distal end of the row is conra (congratulation of section),
the next behavior tulation (conguatulation) of the rear end portion.
word-break: break-word: the difference is that it would congratulation whole word as a whole, if the end of the line is not wide enough to display the entire word, it will automatically write the entire words into the next line, the word will not cut off .
The RGBA color and transparency opcity:
R: Red G: green and B: blue alpha: transparency parameter
RGB value range is the range of 0 ~ 255/0 ~ 100% alpha from 0 to 1 non-negative.
opcity: ranges from 0 to 1.
Gradient color:
background-image: linear-gradient(to bottom,#fff,red)：
Parameter Description: The first parameter specifies the gradient direction to top, to bottom, to right , to left, to top left ......
the second and third arguments: specified start and end values can have more color color background-image: linear-gradient ( to bottom, # fff, black, red).
image:
Image fillet: border-radius: 50%; (set oval),
Picture responsive to: max-width: 100%; height: auto;
Picture Shadow: box-shadow.
Image Filter: filter
Image filters: blur
.blur {
-webkit-filter: Blur (4px);
filter: Blur (4px);
}
highlight effect
.brightness {
-webkit-filter: Brightness (0.30);
filter: Brightness (0.30);
}
contrast
.contrast {
-webkit-filter: contrast (180 [%);
filter: contrast (180 [%);
}
a gray image
.grayscale {
-webkit-filter: Grayscale (100%);
filter: Grayscale (100%);
}
hue rotation
.huerotate {
-webkit-filter: hue-Rotate (180deg);
filter: hue-Rotate (180deg);
}
inverting input image
.invert {
-webkit-filter: Rate History For Converting (100%);
filter: Rate History For Converting (100 %);
}
Transparency
.opacity {
-webkit-filter: Opacity (50%);
filter: Opacity (50%);
}
saturation
.saturate {
-webkit-filter: of saturate (. 7);
filter: of saturate (. 7);
}
dark brown
{.sepia
-webkit-filter: SEPIA (100%);
filter: SEPIA (100%);
}
shadows
.shadow {
-webkit-filter: drop-shadow (8px 8px 10px Green);
filter: drop-shadow (8px Green 10px 8px);
}