CSS Self-study notes (one): CSS3 Backgrounds and Borders

CSS3 background

A number of new background properties have been added to the CSS3, allowing us to do more and better with the background, and to reduce the use of third-party tools to modify the background image.

The main CSS3 is to control the background (aspect, position, transparency ...) by defining the various properties in the BACKGROUNP.

Some of the common properties on the background are (* for new attributes in CSS3):

value	Description
Background-color	Specifies the background color to use.
Background-position	Specifies the location of the background image.
background-size*	Specifies the size of the background image.
Background-repeat	Specifies how the background image is repeated.
background-origin*	Specifies the location area of the background image.
background-clip*	The drawing area that specifies the background.
Background-attachment	Specifies whether the background image is fixed or scrolls along with the rest of the page.
Background-image	Specifies the background image to use.
Inherit	Specifies that the settings for the background property should be inherited from the parent element.
...........................	....................................

Mainstream browsers now support the latest CSS3 on background properties, so don't worry about browser issues ....

Before CSS3, if a picture is needed as a background, the size of the background is determined by the actual size of the picture.

The size of the background image can be defined in CSS3 so that we can use the same picture as the background image in different elements. The size of the background picture can be defined by the number of pixels or percentages.

* {Background:url (1.png); background-size:200px 100px;background-repeat:no-repeat;}

The original image is the bottom left, and with the above CSS style sheet defined, it becomes the bottom right image.

So we can stretch a picture so that it fits the area you want to fill, without having to make changes to the picture through other software, and also make a picture a background image of multiple elements.

* {Background:url (1.png); background-size:120px 100%;background-repeat:no-repeat;}

Inside a box, we can also define the positioning area of the background image by attributes, which defines whether the picture is a border background (Content-box), an inner margin background (padding-box), or an element content background (Border-box).

In CSS3, we can use more than one image as the background image of the element.

*{Background-image:url (1.gif), url (1.png),......;}

In addition to pictures, we can also use color to achieve many background styles.

CSS3 border

For the properties of the border, in the CSS3 also a lot of new, such as adding a border shadow, the picture to draw the border (the border is a width), the definition of rounded border and so on, but also reduce the use of third-party software design to the border.

partial properties of new borders in CSS3

Properties	Description
Border-image	Sets the shorthand property for all border-image-* properties.
Border-radius	Sets the shorthand properties for all four Border-*-radius properties.
Box-shadow	Add one or more shadows to the box.

Define a rounded border

*{border:5px solid;border-radius:50px;}

We can also add a shadow effect to a border

* {box-shadow:10px 10px 5px #CF0;}

We can also use the picture as the border of the element

* {Border-image:url (border.png) round;border-image:url (border.png) stretch;}

Background Image:

Source: Http://www.w3school.com.cn/i/border.png