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

9 Practical CSS Properties Web Front-end Developers Must Know

How to define input type=file style

MySQL Series II Multi-Instance Configuration

Detailed explanation of docker visualization graphics tool portainer

CSS3 implements footer fixed at the bottom (always at the bottom no matter how high the page is)

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

The most common declaration merge in TS (interface merge)

Summary of the top ten problems of MySQL index failure

Summary of MySQL Architecture Knowledge Points

HTML thead tag definition and usage detailed introduction

MariaDB-server installation of MySQL series

Recommend

Summary of 4 solutions for returning values on WeChat Mini Program pages

Solution to the problem of not finding Tomcat configuration in Intelli Idea

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Detailed explanation of how to deploy programs on Alibaba Cloud Server and access them directly using domain names

Keepalived implements Nginx load balancing and high availability sample code

How to create a table in mysql and add field comments

Detailed explanation of fuser command usage in Linux

mysql settings to change the root password, mysql server connection, mysql common commands diagram

Practical method of deleting a row in a MySql table

A brief discussion on JavaScript shallow copy and deep copy

Four completely different experiences in Apple Watch interaction design revealed

CSS imitates Apple's smooth switch button effect

Vue encapsulation component upload picture component

Specific use of routing guards in Vue

Detailed explanation of Vue life cycle functions