Initial Research on css3 and css3 Animation

Source: Internet
Author: User

Initial Research on css3 and css3 Animation

Attribute selector:
1. Completely matched attribute selector. Is a fully matched string.
[Id = article] {
Color: red;
}
2. Contains the matching selector. Contains a specified string.
Syntax: [attribute * = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "* =" symbol.
[Id * = article] {
Color: red;
}
3. The first character matching selector. As long as the start character matches.
Syntax: [attribute ^ = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "^ =" symbol.
[Id ^ = article] {
Color: red;
}
4. Tail character matching selector. Match the ending string.
Syntax: [attribute $ = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "$ =" symbol.
[Id $ = article] {
Color: red;
}


Pseudo class selector:
1. before pseudo-class Element selector, which is used to insert content before an element is selected.
Syntax: Element Tag: before {
Content: "inserted content"
}
P. before {
Content: "text"
}
2. The after pseudo-class Element selector inserts content after an element is selected.
Syntax: Element Tag: after {
Content: "inserted content"
}
P. after {
Content: "text"
}
3. first-child specifies the style of the first element in the element list.
Li: first-child {
Color: red;
}
4. last-child specifies the style of the first element in the element list.
Li: last-child {
Color: red;
}
5. nth-child and nth-last-child can specify the style of an element or the style of an element starting from the last number.
// Specify 2nd li Elements
Li: nth-child (2 ){}
// Specify the last 2nd li Elements
Li: nth-last-child {}
// Specify an even number of li Elements
Li: nth-child (even ){}
// Specify the base li Elements
Li: nth-child (odd ){}


Shadow
1. box-shadow to make the element shadow effect.
Syntax: box-shadow: <length> | color;
The first length is the shadow horizontal offset value;
The second length is the shadow vertical offset value;
The third length is the shadow fuzzy offset value;
The horizontal and vertical values can be negative.
Div {
/* Other browsers */
Box-shadow: 3px 4px 2px #000;
/* Webkit browser */
-Webkit-box-shadow: 3px 4px 2px #000;
/* Firefox */
-Moz-box-shadow: 3px 4px 2px #000;
}
2. text-shadow: Set the shadow effect or blur effect of text content.
Syntax: Same as box-shadow.


Background
1. background-size is used to set the size of the background image.
Syntax: background-size: 10px 5px;
-Webkit-background-size: 10px 5px;
2. background-clip is used to determine the cropping area of the background.
3. backrground-origin is used to specify the start position of the reference coordinate of the background-position attribute.
The upper left corner of the border starts, and the upper left corner of the content area starts padding from the padding area.
4. background:-webkit-gradient (linear, 0 0, 0 100%, from (# fff), to (#000); background gradient


Rounded border
Border-radius:
Border-radius: 10px 5px;
-Moz-border-radius: 10px 5px;
-Webkit-border-radius: 10px 5px;
Or
Border-radius: 10px 5px 10px 5px;
-Moz-border-radius: 10px 5px 10px 5px;
-Webkit-border-radius: 10px 5px 10px 5px;
Viewport virtual window
<Meta name = "viewport" content = "width = device-width, initial-seale = 1, user-scalable = 0"/>
Parameters:
Width specifies the screen width of the virtual window.
Height specifies the screen height of the virtual window.
Initial-scale specifies the initial scaling ratio
Maximum-scale specifies the maximum scale allowed for user Scaling
Minimum-scale specifies the minimum scale allowed for user Scaling
User-scalable specifies whether manual scaling is allowed.
<Link rel = "stylesheet" media = "screen and (min-width: 600px) and (max-width: 900px)" href = "style address"/>
When the screen width is between 600 and ~ This parameter is called at 900.
In portrait Mode
<Link rel = "stylesheet" media = "all and (orientation: portration)" href = "style address"/>
In Landscape mode
<Link rel = "stylesheet" media = "all and (orientation: landscape)" href = "style address"/>
@ Media only screen and (min-width: pixel px ){}
Only mobile browsers automatically ignore this feature,
Unsupported browsers will automatically ignore this style.


Geolocation location.
Navigator. geolocation. getCurrentPosition (function (pos ){
Console. log ("latitude of the current geographic location" + pos. coords. latitude );
Console. log ("longitude of the current geographic location" + pos. coords. longpolling );
Console. log ("accuracy of current latitude" + pos. coords. accuracy );
})

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.