Different shadows, backgrounds, and border styles under CSS3

Different shadows, backgrounds, and border styles under CSS3

CSS2.1 has been released for seven years. The emergence of CSS3 is to enhance the function of CSS2.1, reduce the number of images used and solve the special effect on HTML pages.

Currently, CSS3 is most suitable for mobile Web development with the following features:

● Enhanced Selector

● Shadow

● Powerful background settings

● Rounded border

Shadow:

Currently, CSS3 supports shadow style effects. Currently, two types of shadow effects are available: the shadow effect of text content and the shadow effect of elements.

Box-shadow

The box-shadow attribute of CSS3 is used to shadow elements. Its syntax is as follows:

Box-shadow: <length> | color:

The first length is the shadow horizontal offset value, the second length is the shadow vertical offset value, and the third is the shadow fuzzy value. Positive and negative values can be obtained for the horizontal and vertical offset values, such as 4px or-4px.

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

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

<Style type = "text/css"> div {/* other browsers */box-shadow: 3px 4px 2px #000; /* webkit kernel browser */-webkit-box-shadow: 3px 4px 2px #000;/* Firefox browser */-moz-box-shadow: 3px 4px 2px #000; padding: 5px 4px;} </style>

Text-shadow

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

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

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

Box-shadow: <length> | color:

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

 <style type="text/css">        div        {            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 attributes. It supports both the display range of backgrounds and multi-image backgrounds. The most important thing is that it can set gradient or any color effect for the background color through attribute settings, with rich functions.

CSS3 enhances the background attribute. In the past, we used images to replace various page modifiers. We can gradually replace them with this background attribute. These functions increase the page loading speed, especially on the mobile device platform.

Background-size

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

Currently, this property has been supported by Chrome, Safair, and operabrowsers. It also supports Web browsers on Android and IOS platforms.

The background-size attribute varies with the syntax of different Web browsers. In Chrome and Safari browsers Based on the Webkite kernel, it is written as-webkit-background-size;

In the mobile development project, we recommend that you use the compatibility mode, for example:

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

Background

The background attribute is very powerful in CSS3. One of the most important features is multi-background. In the past, only one image can be used, while 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 support multiple background images with the background attribute. Because they are Webkit-based browsers, this function is also supported by mobile browsers on Android and IOS platforms. However, given that setting the background using images seriously affects the overall experience and performance of mobile Web terminals, a feature of Webkit is used to change the background color, instead of using images. Syntax:

-Webkit-gradient (<type >,< type> [, <radius>]?, <Point> [, <radius>]? [, <Stop>] *)

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

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

Rounded border

In CSS3, you can easily achieve the rounded corner effect. You only need to define the border-radius attribute in the code to achieve the rounded corner effect at will.

So far, this property has been supported by Chrome, Safari, Opera, and Firefox browsers. However, there are some differences between different browsers. For example, Chrome and Safari must be written as-webkit-border-radius; Firefox must be written as-moz-border-radius; the sample code for compatibility is as follows:

<Style type = "text/css"> div {border-radius: 10px 5px;/* Firefox browser */-moz-border-radius: 10px 5px; /* webkit kernel browser */-webkit-border-radius: 10px 5px;} </style>

It should be noted that the border-radius attribute does not allow negative values. When one of them is 0, the corresponding angle of this value is a rectangle; otherwise, it is a rounded corner.

Note: The above content is taken from the HTML5 mobile Development Guide for your reference only!