A brief introduction to shadow, background and rounded border styles in CSS3

It has been 7 years since CSS2.1 was released. The emergence of CSS3 is to enhance the functions of CSS2.1, reduce the use of images and solve special effects on HTML pages

Currently, the features of CSS3 technology most suitable for use in mobile Web development include:

●Enhanced selector

●Shadow

●Powerful background setting

●Rounded border

Shadow:

The current CSS3 style already supports shadow style effects. There are two types of shadow effects currently available: shadow effects for text content and shadow effects for elements.

box-shadow

The box-shadow property of CSS3 gives the element a shadow effect. Its syntax is as follows:

   box-shadow:<length> <length> <length> | color:

The first length is the horizontal offset of the shadow. value; the second length value is the shadow vertical offset value; the third value is the shadow blur value. The horizontal and vertical offset values ​​​​can take positive and negative values, such as 4px or -4px.

At present, box-shadow has been supported by most modern browsers. However, when we use this attribute on Webkit-based browsers such as Chrome and Safari, we need to write the name of the attribute in the form of -webkit-box-shadow. For Firefox browser, it should be written in the form of -moz-box-shadow.

The following code is a simple example of using box-shadow, which is compatible with Chrome, Safari and Firefox browsers:

<style type="text/css">
        p
        {
            /* 其他浏览器 */
            box-shadow: 3px 4px 2px #000;
            /* webkit内核浏览器 */
            -webkit-box-shadow: 3px 4px 2px #000; 
            /* Firefox浏览器 */
            -moz-box-shadow: 3px 4px 2px #000;
            padding:5px 4px;
        }
    </style>

text-shadow

The text-shadow attribute is used Set the shadow effect or blur effect of text content.

Currently, the text-shadow attribute is supported by Safari, Firefox, Chrome and Opera browsers. Browsers below IE8 do not support this feature. And, most mobile web browsers are well supported.

The syntax of text-shadow is basically the same as that of box-shadow:

box-shadow: | color:

The following code is a simple and practical example of text-shadow:

 <style type="text/css">
        p
        {
            text-shadow: 5px -10px 5px red;
            color:#666;
            font-size:16px;
        }
    </style>

Background

In the CSS3 specification, CSS3 adds many new features to the background attribute. It supports both the display range of the background and multiple image backgrounds. The most important thing is that it can set gradients or any color effects for the background color through attribute settings, which is very versatile.

CSS3 enhances the background attribute. In the past, we used pictures to replace various page modifications, and gradually they can be replaced by the background attribute. These features improve page loading speed, especially on mobile device platforms, and are a page performance improvement.

background-size

The background-size attribute is used to set the size of the background image.

At present, this attribute has been supported by Chrome, Safair, and Opera browsers. At the same time, this attribute also supports web browsers on Android and IOS platforms.

The background-size attribute has certain syntax differences in different web browsers. In the Chrome and Safari browsers based on the Webkite kernel, the writing method is -webkit-background-size;

In mobile development projects, it is recommended to use the compatibility mode writing method, the example is as follows:

 <style type="text/css">
        p
        {
            background-size:10px 5px;
            -webkit-backgriud-size:10px 5px;
        }
    </style>

background

The background attribute is given a very powerful function in CSS3. One of the very important features is multiple backgrounds. In the past, only one image could be used, but multiple background images can be set in CSS3. The syntax is as follows:

  background:url(bg.jpg) left top no-repeat,
                             url(bg2.jpg) left top no-repeat;

Both Chrome and Safari browsers support multiple background images with the background attribute. Since they are Webkit-based browsers, this feature is also supported by mobile browsers on Android and IOS platforms. However, since setting the background using pictures will seriously affect the overall experience and performance of the mobile Web, we use a feature in Webkit to use a color gradient for the background instead of using pictures. The syntax is as follows:

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

The type type refers to the gradient type, such as linear gradient linear or radial gradient radial. The following code:

<style type="text/css">
        p
        {
            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
        }
</style>

Rounded border

In CSS3, the rounded corner effect can be easily achieved. As long as the border-radius attribute is defined in the code, the rounded corner effect can be achieved at will.

So far, this attribute has been supported by Chrome, Safari, Opera and Firefox browsers. However, there are some differences in writing methods between browsers. For example: Chrome and Safari browsers need to write -webkit-border-radius; Firefox browsers need to write -moz-border-radius; the compatible sample code is as follows:

<style type="text/css">
        p
        {
             border-radius:10px 5px;
             /* Firefox浏览器 */
             -moz-border-radius:10px 5px;
             /* webkit 内核浏览器 */
             -webkit-border-radius:10px 5px;
        }
    </style>

It should be noted that the border-radius attribute is not allowed to use negative values. When one of them is 0, the corner corresponding to the value is a rectangle, otherwise it is a rounded corner.

The above is the detailed content of A brief introduction to shadow, background and rounded border styles in CSS3. For more information, please follow other related articles on the PHP Chinese website!