Background Origin: Background-origin:
Border-box(the background image is displayed starting from the border area, including border). ）
Padding-box(the background image is displayed starting from the padding area, including padding). ）
Content-box(the background image is displayed starting from the content area.) ）
<style type="Text/css">. box{width:250px; height:250px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_01.jpg) no-repeat; border:10px dashed red; background -origin:border- Box; }. box2{width:250px; height:250px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_01.jpg) no-repeat; border:10px dashed red; background -origin:padding- Box; }. box3{width:250px; height:250px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_01.jpg) no-repeat; border:10px dashed red; background -origin:content- Box; }
</style>
<body>
<div class= "box" ><p> displays the background image from the border area (including border). <p></div>
<div class= "Box2" ><p> displays the background image from the padding area (including padding). <p></div>
<div class= "Box3" ><p> displays the background image from the content area. <p></div>
</body>
The effect is as follows:
the display area of the background
Sets the area of the background image to be cropped outwards.
Background-clip:
Padding-box: The background is cropped from the padding area (excluding padding).
Border-box: The background is cropped from the border area (excluding border).
Content-box: Start cropping the background from the content area.
Text: The shape of the foreground content, such as text, is cropped out as the clipping area, so that you can use the background as a matte effect such as a fill color.
<style type="Text/css">. box{width:200px; height:200px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_02.jpg) no-repeat; border:10px dashed red; Background-clip:border-box; }. box2{width:200px; height:200px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_02.jpg) no-repeat; border:10px dashed red; Background-clip:padding-box; }. box3{width:200px; height:200px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_02.jpg) no-repeat; border:10px dashed red; Background-clip:content-box; }. box4{width:200px; height:200px; float: Left; Margin-left:20px; padding:20px; Background: #aaa URL (zzfw_02.jpg) no-repeat; border:10px dashed red; -webkit-background-Clip:text; -webkit-text-fill-color:transparent; Font-Weight:bold; Font-size:30px; } p{margin-top:150px; font-size:20px; Color: #fff; font-Weight:bold;} </style><body> <divclass="Box"><p> from the border area (excluding border), start to crop the background outward. <p></div> <divclass="Box2"><p> from the padding area (excluding padding), start to crop the background outward. </p></div> <divclass="Box3"><p> crop the background out of the content area. </p></div> <divclass="box4"> Crop from the shape of the foreground content (such as text) as the clipping area </div></body>
The effect is as follows:
Background SizeBackground-size:
div{background-size:100px 150px;} /* adjust the size of the background image */Attention:
Separate the abbreviated values of each group of background with commas;
If there is a size value, it needs to be followed by position and separated by "/";
If you have more than one background picture, and the other attributes are only a single (for example, Background-repeat only one),
Indicates that the property value is applied to all background pictures.
Background-color can only set one.
List StyleBullets:
List-style-type:Value:
Disc: Solid Circle
Circle: Hollow Circle
Square: Solid block
Decimal: Arabic Numerals
Lower-roman: Lowercase roman numerals
Upper-roman: Uppercase Roman Numerals
Lower-alpha: lowercase English alphabet
Upper-alpha: Uppercase English alphabet
None: bullets are not used
Armenian: The traditional Armenian numerals
Cjk-ideographic: plain, ideographic numerals
Georgian: The traditional George number
Lower-greek: basic Greek small Letter
Hebrew: the traditional Hebrew numerals
Hiragana: Japanese Hiragana characters
Hiragana-iroha: Japanese Hiragana serial number
Katakana: Japanese Katakana characters
Katakana-iroha: Japanese Katakana serial Number
Lower-latin: lowercase Latin alphabet
Upper-latin: Uppercase Latin alphabet
Commonly used are:
. disc{list-style-Type:disc;}. Circle{list-style-type:circle;}. Square{list-style-type:square;}. decimal {list-style-type:decimal;}. Lower-alpha{list-style-type:lower-Alpha;}. Upper-alpha{list-style-type:upper-Alpha;}. None{list-style-type:none;}The effect is as follows:
list-style-position：
Value:
Outside: list item markers are placed outside of text, and wrapping text is not aligned with tags
Inside: list item markers are placed within text, and wrapping text is aligned according to the tag
. outside{width:120px;list-style-Position:outside;}. Inside{width:120px;list-style-position:inside;}The effect is as follows:
Custom Bullets
Syntax:list-style-image:none | url (URL)
. Div{list-style-image:url (skin/ico.png);}The effect is as follows:
deform Style Transform1. Translate (): Specifies the object's 2D translation (2D panning). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0
/** * div { width:100p x; height:100px; border:10px solid red; Background-color: #808080; transform:translate (200px, 200px); } 2. TranslateX ()
/* move the x-axis, specify the translation of the object's x-axis (vertical direction), move from the original position to the x-axis of 200px, and the y-axis as the original y-axis factor */ Div { width:100p x; height:100px; border:10px solid red; Background-color: #808080; Transform:translatex (200px); }3. Translatey ()
/* Move the y-axis, specify the pan of the object's x-axis (horizontal direction), move from the original position to the y-axis 250px position */ Div { width:100p x; height:100px; border:10px solid red; Background-color: #808080; Transform:translatey (250px); }4. Rotate (): (2D rotation)
/* Rotate 15 degrees */
. circle-Box { width:100px; height:100px; Border-radius:10px; 0 0 50px; Background-color: #808080; transform:rotate (15deg); }
The effect is as follows:
5. Scale ()
/* The x-axis of the original size is enlarged by 1.1 times times, and the y-axis is enlarged 2.2 times times by the original */ /* integers are the equivalent of amplification, and negative numbers are the equivalent of shrinking */ . box{ Transform:scale (1.12.2); }6. Skew (): (Skew-cut twist)
/* The first parameter corresponds to an x-axis */
. box {Transform:skew (deg);}
The effect is as follows:
7. Translate3d ():
Specifies the 3D displacement of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting
9. Transform-origin
Any element has a center point, and by default its center point is 50% of the element's x-axis and y-axis.
#div1 {position:relative; height:200px; width:200px; margin:100px; padding:10px; BORDER:1PX solid black;} #div2 {padding:50px; Position:absolute; BORDER:1PX solid black; Background-color:red; Transform:rotate (45DEG); Transform-origin: -%0%; -ms-transform:rotate (45DEG);/*IE 9*/-ms-transform-origin: -%0%;/*IE 9*/-webkit-transform:rotate (45DEG);/*Safari and Chrome*/-webkit-transform-origin: -%0%;/*Safari and Chrome*/}
The effect is as follows:
Transition animations
Background style, list style, warp style, transition animation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
