CSS3 Basic Knowledge

CSS3 Basic Knowledge
1. Border
1.1 Rounded corners border-radius:5px 0 0 5px;
1.2 Shadow box-shadow:2px 3px 4px 5px rgba (0,0,0,0.5);(horizontal, vertical, blurry, extended)
Box-shadow:inset 1px 2px 3px 4px #fff;(inset inner shadow)
1.3 Border Image Border-image
2. Background
2.1 Background-size background-size:30px 30px; (background image width, background image height)
2.2 Background-image:linear-gradient (45deg,rgba (0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba (0,0,0,0.5) 50%, Rgba (0,0,0,0.5) 75%,transparent 75%,transparent);(linear gradient, used with background-size)
2.3 background-attachment: (fixed|scroll|local)
Fixed: The background image is pinned relative to the form.
Scroll: The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself. However, it scrolls along with the element's ancestor element or form.
Local: The background image is fixed relative to the element content, which means that the background image scrolls as the element scrolls along with the element, because the background image always follows the content.
2.4 background-position:30px 20px; (horizontal axis, ordinate; is the picture in motion)
2.5 Background-origin: (Padding-box|border-box|content-box)
Padding-box: Displays the background image starting from the padding area (including padding).
Border-box: Displays the background image starting from the border area (including border).
Content-box: Displays the background image starting from the content area.
3. Text
3.1 Text Shadow text-shadow:5px 5px 4px #000;(horizontal, vertical, blur)
3.2 NewLine Word-wrap: (Normal|break-word)
Normal: Allows the content to open or overflow the specified container boundary.
Break-word: Content will be wrapped within the boundary. If necessary, word breaks are allowed inside words.
White-space: (Normal|pre|nowrap|pre-wrap|pre-line)
Normal: The 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. can refer to the Pre object
NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object.
Pre-wrap: Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary.
Pre-line: Preserves text wrapping, does not preserve whitespace between text, and wraps when text touches the boundary.
3.3 ellipsis width:200px;
Overflow:hidden;
Text-overflow:hidden;
White-space:nowrap;
4.2D Transformations
4.1 Rotating transform:rotate (45DEG);
4.2 Mobile Transform:translate (45px,45px);(horizontal, vertical)
4.3 Scaling Transform:scale (2,2);(horizontal, vertical)
4.4 Flip Transform:skew (20deg,40deg);(Flip along the x-axis and flip along the y-axis)
4.5 Combining the above four together with The Matrix () requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.
Temporary release
5. Transition
5.1 transition: [Transition-property] | | [Transition-duration] | | [Transition-timing-function] | | [Transition-delay]
[Transition-property]: Retrieves or sets the properties of a participating transition in an object
[Transition-duration]: Retrieves or sets the duration of the object transition
[Transition-timing-function]: Retrieves or sets the animation type of the transition in the object, with a value of linear | Ease | ease-in | Ease-out | Ease-in-out |
Linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
[Transition-delay]: Retrieving or setting the time for object delay transitions
6. Animations
6.1 Animation: [[Animation-name] | | [Animation-duration] | | [Animation-timing-function] | | [Animation-delay] | | [Animation-iteration-count] | | [Animation-direction]]
[Animation-name]: Retrieves or sets the name of the animation to which the object is applied
Use @key-frames animation-name{} with @keyframes
[Animation-duration]: Retrieves or sets the duration of an object animation
[Animation-timing-function]: Retrieves or sets the transition type of an object animation
Linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
[Animation-delay]: Retrieves or sets the time the object animation is delayed
[Animation-iteration-count]: Retrieves or sets the number of cycles for an object animation
Infinite: Infinite loop
<NUMBER&GT: Specifies the number of cycles to animate the object
[Animation-direction]: Retrieves or sets whether an object animation moves backwards in a loop
Normal: Regular direction
Alternate: normal and reverse alternating
. One {
animation:animations 2s ease-out;
}
@-webkit-keyframes animations{
0%{-webkit-transform:translate (0); opacity:0;}
50%{-webkit-transform:translate (30px); opacity:1;}
70%{-webkit-transform:translate (35px); opacity:1;}
100%{-webkit-transform:translate (60px); opacity:0;}
}
7. Media Enquiry
7.1 Media
1. When the page is less than 960px
@media screen and (max-width:960px) {
body{
background:red;
}
}
2. When the page equals 960px
@media screen and (max-device-width:960px) {
body{
Background:blue;
}
}
3. When the page is larger than 960px
@media screen and (min-width:960px) {
body{
Background:green;
}
}
4. The page is more than 960px less than the wording of the 1200px
@media screen and (min-width:960px) and (max-width:1200px) {
body{
Background:yellow;
}
}
5. Explanation of all media parameters
Width: The viewable width of the browser.
Height: The viewable height of the browser.
Device-width: The width of the device screen.
Device-height: The height of the device screen.
Orientation: The test equipment is currently in the horizontal or vertical state.
Orientation: The test equipment is currently in the horizontal or vertical state.
Device-aspect-ratio: Detects the ratio of the width and height of the device.
Color: detects the number of digits of the color. (ex: MIN-COLOR:32 will detect if the device has 32-bit color)
Color-index: Check the color in the Device Color Index table, his value cannot be negative.
Monochrome: Detects the number of bits per pixel in a monochrome ligustrum buffer area. (This is too high, I guess I seldom use it.)
Resolution: Detects the resolution of the screen or printer. (For example: min-resolution:300dpi or MIN-RESOLUTION:118DPCM).
Grid: Whether the device that detects the output is a grid or a bitmap device.
6. The core CSS technology of responsive Design media (media Finder) usage
1. When using media, you need to set up the following code to be compatible with the display of mobile devices.
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >
width = device-width: Widths equal to the width of the current device
Initial-scale: Initial zoom ratio (default = 1.0)
Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)
Maximum-scale: Maximum scale allowed to be scaled by the user (default = 1.0)
User-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)
2.ie8 neither supports HTML5 nor supports CSS3 Media, so we need to load two JS files to ensure that our code achieves compatibility:
<script src= "Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ></script>
<script src= "Https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" ></script>
3. Set IE render mode to default to highest
The following code to make IE's document mode is always up-to-date:
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
This code is followed by a chrome=1, this Google Chrome frame (Google embedded browser framework GCF), if some of the user's computer contains the Chrome plug-in, Can let the computer inside of IE regardless of which version of the can use WebKit engine and V8 engine for typesetting and operation, incomparable to force, but if the user did not install the plug-in, then this code will let IE in the highest document mode to show the effect.
8. Function Calculation
8.1 Counter () is a function that is used primarily with content, using counter () to invoke a defined counter identifier.
Such as:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul> Li{list-style:none;counter-increment:antzone;} Li:before{content:counter (Antzone) ".";}
8.2 attr () and content use together
attr (title), in parentheses is a referenced property, but often references a custom property
P:after{content:attr (title);}
8.3 Calc () Any length value can be calculated using the Calc () function, which supports +,-,*,/,MOD operations
p{
Width:-moz-calc (100%-50px);
Width:-webkit-calc (100%-50px);
Width:calc (100%-50px);
}
9. Pseudo-Object selectors
9.1:first-letter sets the style of the first character within the object, for use with block-level elements, often with font-size and float, to get the drop-cap effect
P:first-letter {font-size:30px;}
9.2:first-line sets the first row within the object for block-level elements
p:first-line {color: #000;}
9.3:before setting what happens before an object is used with content
P:before {content: "";}
9.4:after setting what happens before an object is used with content
P:after {content: "";}
9.5:selection style is selected when the style is set
p:-moz-selection{color:red;}
p:selection {color:red;}
10. Length Unit px em rem
px:px pixels (Pixel). Relative length units. Pixel px is relative to the display screen resolution.
Em:em is a unit of relative length. The font size relative to the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser.
The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX.
Declare the font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, you just need to divide your original PX value by 10, And then put EM in the unit on the line.
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
REM: When you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM. Here's an example:
p {font-size:14px; font-size:.875rem;}

CSS3 Basic Knowledge