9 CSS attributes that Web front-end developers must know

CSS can improve the design of the site and explore the possibility of more web design, you can make your Web site more attractive. For front-end developers, web designers, mastering and proficient in the application of CSS is an essential skill.

Here is a list of some very useful CSS3 properties and tips to help you with your development and design efforts. 1. Fillet effect

Today's web design is constantly following up on the latest development technologies, using HTML5 to develop diverse web applications. One of the advantages of HTML5 is that the elements that must be implemented with pictures can now be implemented in code. "Border-radius" is an important attribute for implementing this feature, which can be used to directly define the rounded corners 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*/

To fully understand IE browser support for CSS3 properties, please read this article. 2. Shadow effect

Shadow effects can be easily achieved by CSS3 's Box-shadow properties. This property is supported by all major browsers, with the Safari browser supporting the prefix-webkit-box-shadow attribute.

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 implement 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 is applied in the property value.

CSS Code @media screen and (max-width:480px) {/* page display style on width 480px *}

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

CSS code @media print {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 you cannot rely entirely 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 set the size of the background image. The size of the previous background image is not adjustable in style, and now a line of code using the background Size property enables the user to achieve a background image effect.

CSS Code div {background:url (bg.jpg); background-size:800px 600px; 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 Web pages. Previously, because of font licensing issues, designers can only use a specific font. First customize the name of the font:

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

You can then use the Mysmashingfont font family anywhere:

CSS code div {font-family:mysmashingfont;}
7. Clearfix Properties

If the designer thinks Overflow:hidden can't handle the float well, then Clearfix provides a better way to handle the floating solution.

CSS code. Clearfix {Display:inline-block} CSS code. Clearfix:after {content: "."; display:block; clear:both;