Shulou(Shulou.com)06/03 Report--

This article will explain in detail what CSS attributes Web front-end developers must know. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Fillet effect

Today's Web design is constantly following the latest development technology, one after another using HTML5 to develop a variety of Web applications. One of the advantages of HTML5 is that elements that previously had to be implemented in pictures can now be implemented in code. "border-radius" is an important attribute that implements this function, can be used to directly define the fillet of HTML elements, and is supported by all modern browsers.

Css code

The code is as follows:

Border-radius: 10px; / * CSS3 Property * /

-moz-border-radius: 10px; / * Firefox * /

-webkit-border-radius: 10px; / * Chrome/Safari * /

-khtml-border-radius: 10px; / * Linux browsers * /

For a full understanding of IE browser support for CSS3 attributes, please read this article.

two。 Shadow effect

Shadow effects can be easily achieved through the box-shadow property of CSS3. All major browsers support this attribute, and Safari browsers support the prefixed-webkit-box-shadow attribute.

Css code

The code is as follows:

# myDiv {

-moz-box-shadow: 20px 10px 7px # ccc

-webkit-box-shadow: 20px 10px 7px # ccc

Box-shadow: 20px 10px 7px # ccc

}

You can also use JavaScript to achieve shadow effects, as follows:

Css code

The code is as follows:

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

3. @ medium attribute

The Media property is used to set the style of the same style sheet under different screens, and you can specify the media or media to which this style is applied in the property value.

Css code

The code is as follows:

@ media screen and (max-width: 480px) {

/ * display style of a web page on a 480px screen with a width of * /

}

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

Css code

The code is as follows:

@ media print

{

P.content {color: # ccc}

}

4. Gradient filling

CSS3's Gradient property gives developers another amazing experience. Gradient is not supported by all browsers yet, so you can't rely entirely on Gradient to set the layout.

Css code

The code is as follows:

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 property sets the size of the background image. In the past, the size of the background image was uncontrollable in the style, but now a single line of code with the Background size attribute can achieve the background image effect that the user wants.

Css code

The code is as follows:

Div

{background:url (bg.jpg)

Background-size:800px 600px

Background-repeat:no-repeat

}

6 @ font face

The @ font face attribute in CSS3 is a great improvement on the referenced font file, which is mainly used to embed custom Web fonts into web pages. In the past, designers could only use specific fonts because of font licensing problems. First customize the name of the font:

Css code

The code is as follows:

@ font-face

{

Font-family: mySmashingFont

Src: url ('blitz.ttf')

, url ('blitz.eot'); / * IE9 * /

}

Then you can use the mySmashingFont font family anywhere:

Css code

The code is as follows:

Div

{

Font-family:mySmashingFont

}

7. Clearfix attribute

If the designer thinks that Overflow: hidden doesn't handle floats well, then clearfix provides a better solution for handling floats.

Css code

The code is as follows:

.clearfix {

Display: inline-block

}

Css code

The code is as follows:

.clearfix: after {

Content: ".

Display: block

Clear: both

Visibility: hidden

Line-height: 0

Height: 0

}

8. Margin: 0 auto

The Margin: 0 auto attribute is the underlying attribute of CSS. Although the CSS syntax does not define a statement with block elements centered, designers can still use the auto margin option to implement this function. This attribute can center an element as needed. Note, however, that the designer needs to set the width of the div to achieve this.

Css code

The code is as follows:

.myDiv {

Margin: 0 auto

Width:600px

}

9. Overflow: hidden

The CSS property Overflow:Hidden not only hides the overflow function, but also clears the float.

Css code

The code is as follows:

Div

{

Overflow:hidden

}

This is the end of the article on "what CSS attributes Web front-end developers must know". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.