CSS3 different shadows, backgrounds, and rounded border styles

CSS3 different shadows, backgrounds, and rounded border styles

CSS2.1 has been published for more than 7 years now. The appearance of CSS3 is to enhance the function of CSS2.1, reduce the number of pictures and solve the special effects on the HTML page.

Currently, CSS3 technologies are best suited for use in mobile Web development, including:

Enhanced selectors

Shadow

Powerful background settings

Rounded border

Shadow:

The CSS3 style now supports shadow style effects. There are two types of shadows that can be used at the moment: the shadow Effect of the text content and the shadow effect of the element.

Box-shadow

The Box-shadow property of CSS3 is the effect of having the element shaded, with the following syntax:

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

Where the first length is the shadow horizontal offset value, the second length value is the shadow vertical offset value, and the third value is the shadow blur value. Horizontal and vertical offset values may be positive negative, such as 4px or -4px.

Currently Box-shadow has been supported by most modern browsers. However, when we use this property on browsers such as WebKit-based chrome and Safari, we need to write the name of the property in the form of-webkit-box-shadow. The Firefox browser is written in-moz-box-shadow form.

The following code is a simple example of using Box-shadow, which 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 property is used to set the shadow effect or blur effect of the text content.

Currently, the Text-shadow property is supported by Safari, Firefox, Chrome, and opera browsers. This feature is not supported by browsers below IE8. And most of the mobile web browsers are well supported.

Text-shadow's syntax and Box-shadow syntax are basically the same:

box-shadow:<length> <length> <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 a lot of new features to the background properties. It supports both the background display range and the multi-image background. The most important thing is that it can be set by property, set a gradient or any color effect for the background color, and is very versatile.

CSS3 for the enhancement of background properties, we used the image instead of various page decorations, which can be replaced by this background property gradually. These features on the page load speed, especially on the mobile device platform, is a page performance improvement.

Background-size

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

This property is now supported by Chrome, Safair, and opera browsers, and this property also supports the Web browser for Android and iOS platforms.

The Background-size property has some differences in syntax under different Web browsers. In the Webkite kernel-based browser Chrome and Safari browser, the wording is-webkit-background-size;

In a mobile development project, it is recommended to use compatibility mode, as shown in the following example:

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

Background

The Background property is a very powerful feature that is given in CSS3. One of the most important features is multiple backgrounds. In the past, only one picture can be used, while CSS3 may be set up with multiple backgrounds, with the following syntax:

Background:url (bg.jpg) left top no-repeat,

URL (bg2.jpg) left top no-repeat;

Both Chrome and Safari browsers support multiple background images of the background property. Because they are webkit-based browsers, this feature is also supported by mobile browsers for Android and iOS platforms. But because setting the background in a picture can seriously affect the overall experience and performance on the mobile Web side, it uses one of the features in WebKit to use a color gradient for its background rather than a picture-based approach. The syntax is as follows:

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

Type types refer to the type of gradient, 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, it has been easy to achieve rounded corners, as long as the Border-radius attribute is defined in the code so that the fillet effect can be achieved arbitrarily.

So far, this property has been supported by Chrome, Safari, opera, and Firefox browsers. However, there are some differences between browsers, for example: Chrome and Safari need to be written as-webkit-border-radius; The Firefox browser is written as-moz-border-radius, and the compatible sample code 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 is important to note that the Border-radius property is not allowed to use negative values, and when one is 0 o'clock, the corresponding corner of the value is a rectangle, otherwise it is rounded.

Remark: The above content is excerpted from "HTML5 Mobile Development Guide" a book, only for the study reference!