Practical CSS3 attributes and usage skills

CSS can improve website design and open up more possibilities of website design, which can make your webpage more attractive. For front-end developers and website designers, mastering and mastering CSS application is an essential skill.

The following lists some very practical CSS3 attributes and usage tips, hoping to help your development and design work.

1. rounded Corner Effect

Today's Web design is constantly following up on the latest development technologies, and HTML5 is used to develop diverse Web applications. One of the advantages of HTML5 is the elements that must be implemented using images. Now we can use code to implement them. "Border-radius" is an important attribute for implementing this function. It can be used to directly define the rounded corner of HTML elements and is supported by all modern browsers.

Http://www.cnblogs.com/roucheng/

To avoid browser compatibility issues, it is best for the designer to declare the Code separately.

2. Shadow Effect

With the box-shadow attribute of CSS3, you can easily implement the shadow effect. All mainstream browsers support this attribute. Safari supports the prefix-webkit-box-shadow attribute.

{:;:;:; }

 

You can also use JavaScript to implement the shadow effect as follows:

object.style.boxShadow="20px 10px 7px #ccc"  

 

3. @ media attributes

The Media attribute is used to set the style of a style table on different screens. You can specify the Media or Media that applies the style in the attribute value.

@ Media screen and (max-width: 480px ){
/* Display style of the webpage on the screen with a width of PX */
}

You can also use the @ media print attribute to specify the print preview style:

@ Media print
{
P. content {color: # ccc}
}

4. Gradient Filling

The Gradient (Gradient) attribute of CSS3 gives developers another amazing experience. Gradient has not yet been supported by all browsers, so it cannot be completely dependent on Gradient to set the layout.

Background:-webkit-gradient (linear, left top, left bottom, from (darkGray), to (# 7A7A7A ));

5. Background size

Background size is one of the most important attributes in CSS3 and has been supported by many browsers. The Background size attribute is used to set the size of the Background image. In the past, the size of the Background image was uncontrollable in the style. Now, you can use a line of code in the Background size attribute to achieve the desired Background image effect.

Div
{Background: url(bg.jpg );
Background-size: 800px 600px;
Background-repeat: no-repeat;
}

6 @ font face

The @ font face attribute in CSS3 greatly improves the referenced font file. This attribute is mainly used to embed custom Web fonts into webpages. In the past, due to the font license issue, designers could only use specific fonts. First, customize the font name:

@ Font-face
{
Font-family: mySmashingFont;
Src: url ('blitz. ttf ')
, Url ('blitz. eot');/* IE9 */
}

Then the mySmashingFont family can be used anywhere:

Div
{
Font-family: mySmashingFont;
}

7. clearfix attributes

If the designer thinks that Overflow: hidden cannot handle floating well, clearfix provides a better solution to handle floating.

. Clearfix {
Display: inline-block;
}

 

 {  :;  :;  :;  :;  :;  :;  }

 

8. Margin: 0 auto

Margin: The 0 auto attribute is the basic attribute of CSS. Although the CSS syntax does not define a block element center statement, the designer can still use the auto margin option to implement this function. This attribute can center an element as needed. However, you must specify the width of the div.

 

. MyDiv {
Margin: 0 auto;
Width: 600px;
}

 

9. Overflow: hidden

Overflow: the CSS property of Hidden not only hides the Overflow function, but also clears floating.

 

Div
{
Overflow: hidden;
}