9 Practical CSS Properties Web Front-end Developers Must Know

1. Rounded Corners

Today's web designs are constantly keeping up with the latest development technologies, and are using HTML5 to develop diverse web applications. One of the advantages of HTML5 is that elements that previously had to be implemented with images can now be implemented with code. "border-radius" is an important attribute to achieve this function, which can be used to directly define the rounded corners of HTML elements and is supported by all modern browsers.

CSS Code

Copy 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 */

To fully understand IE browser's support for CSS3 properties, please read this article.

2. Shadow Effect

The shadow effect can be easily achieved through the box-shadow property of CSS3. All major browsers support this property, and Safari supports the prefixed -webkit-box-shadow property.

CSS Code

Copy 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 the shadow effect, as follows:

CSS Code

Copy code

The code is as follows:

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

3. @media attribute

The Media attribute is used to set the style of the same style sheet on different screens. The medium or media to which this style is applied can be specified in the attribute value.

CSS Code

Copy code

The code is as follows:

@media screen and (max-width: 480px) {
/* Display style of the web page on a screen with a width of 480px*/
}

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

CSS Code

Copy code

The code is as follows:

@media print
{
p.content { color: #ccc }
}

4. Gradient fill

The Gradient property of CSS3 gives developers another amazing experience. Gradient is not yet supported by all browsers, so you cannot rely entirely on Gradient to set the layout.

CSS Code

Copy 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 properties in CSS3 and has been supported by many browsers. The Background size property is used to set the size of the background image. Previously, the size of the background image was not adjustable in the style. Now, using the Background size property, you can achieve the background image effect the user wants with just one line of code.

CSS Code

Copy 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 has made great improvements to referencing font files. This attribute is mainly used to embed custom web fonts into web pages. Previously, due to font licensing issues, designers were limited to using specific fonts. First, customize the name of the font:

CSS Code

Copy 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

Copy code

The code is as follows:

div
{
font-family:mySmashingFont;
}

7. The clearfix attribute

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

CSS Code

Copy code

The code is as follows:

.clearfix {
display: inline-block;
}

CSS Code

Copy code

The code is as follows:

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

8. Margin: 0 auto

Margin: 0 auto property is a basic CSS property. Although CSS syntax does not define a statement for centering block elements, designers can still use the auto margin option to achieve this function. This property can be used to center an element as needed. But please note that this will only be possible if the designer sets the width of the div.

CSS Code

Copy code

The code is as follows:

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

9. Overflow: hidden

Overflow: In addition to hiding the overflow function, the Hidden CSS property also has the function of clearing floats.

CSS Code

Copy code

The code is as follows:

div
{
overflow:hidden;
}

<<: CSS3 to achieve simple white cloud floating background effect

>>: React event binding details