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

Editor to share with you what the CSS attributes commonly used in html5 mobile sites are, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

1. Fillet effect

"border-radius" is an important attribute to achieve this function, which can be used to directly define the fillet of HTML elements and is supported by all modern browsers.

. border-radius:10px

.-moz-border-radius:10px

.-webkit-border-radius:10px

.-khtml-border-radius:10px

2. Shadow effect

The shadow effect 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.

# 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:

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. You can specify the media or media to which this style is applied in the property value.

@ mediascreenand (max-width:480px) {}

The [email?protected] print property specifies the style of the print preview:

@ mediaprint {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.

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

5. Background size

Background size is one of the most important properties in CSS3 and has been supported by many browsers. The background size property is used to set 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.

Div {background:url (bg.jpg); background-size:800px600px;background-repeat:no-repeat;}

6. @ font face

The [email?protected] face property 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:

@ font-face {font-family:mySmashingFont;src:url ('blitz.ttf'), url (' blitz.eot');}

Then you can use the mySmashingFont font family anywhere:

Div {font-family:mySmashingFont;}

7. Clearfix attribute

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

.clearfix {display:inline-block;}

.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 basic property 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.

.myDiv {margin:0auto;width:600px;}

9. Overflow: hidden

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

Div {overflow:hidden;}

The above is all the content of the article "what are the CSS attributes commonly used in html5 mobile websites". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.