HTML5 9 CSS properties commonly used on mobile websites

1. Rounded angle effect

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

CSS Code

. border-radius:10px;/* CSS3 Property * *

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

.-webkit-border-radius:10px;/* Chrome/safari */

.-khtml-border-radius:10px;/* Linux Browsers */

2. Shadow effect

The CSS3 Box-shadow property makes it very easy to achieve shadow effects. This property is supported by all major browsers, where the Safari browser supports the-webkit-box-shadow attribute with the prefix added.

CSS Code

#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

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

3. @media Properties

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 applies in the property values.

CSS Code

@mediascreenand (max-width:480px) {/* Web page display style on 480px screen */}

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

CSS Code

@mediaprint {p.content{color: #ccc};}

4. Gradient Fill

CSS3 's gradient (gradient) attribute gives the developer another amazing experience. Gradient has not been supported by all browsers, so it is not entirely dependent on gradient to set the layout.

CSS Code

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 is used to format the background image. The size of the previous background image is not adjustable in the style, and today a single line of code using the background Size property can achieve the desired background image effect for the user.

CSS Code

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

6. @font Face

The @font face property in CSS3 has greatly improved the reference font file, which is primarily used to embed custom Web fonts into a Web page. Prior to the issue of font licensing, designers could only use specific fonts. First, customize the name of the font:

CSS Code

@font-face{font-family:mysmashingfont;src:url (' Blitz.ttf '), url (' Blitz.eot ');/* IE9 */}

Then you can use the Mysmashingfont font family from anywhere:

CSS Code

Div{font-family:mysmashingfont;}

7. Clearfix Properties

If the designer thinks that Overflow:hidden cannot handle the float well, then Clearfix provides a better solution for handling floating.

CSS Code

. Clearfix{display:inline-block;}

CSS Code

. Clearfix:after{content: "."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}

8. margin:0 Auto

The Margin:0 Auto property is the underlying property of the CSS. Although the CSS syntax does not define a statement centered on a block element, the designer can still use the Auto margin option to implement this feature. This property can center an element as needed. Note, however, that it is necessary for the designer to set the width of the div.

CSS Code

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

9. Overflow:hidden

Overflow:hidden This CSS property in addition to hiding the overflow function, but also to clear the role of floating.

CSS Code

Div{overflow:hidden;}

HTML5 9 CSS properties commonly used on mobile websites