More than CSS 2 in css3-border and background

Expand the knowledge attributes of css2 Under CSS
Border:

 

(1) css3 shadow attribute box-shadow

Box-Shadow: Shadow horizontal offset value (positive and negative values are recommended); shadow vertical offset value (positive and negative values are recommended); shadow mode

Paste value; shadow color;

Firefox supports box shadow (Shadow):-moz-box-Shadow: 2px 2px 5px #333333;

Safari and chrome in the WebKit Kernel support box shadow (Shadow):-WebKit-box-Shadow: 2px 2px 5px

#333333;

Opera supports box shadow (Shadow): Box-Shadow: 2px 2px 5px #333333;

IE does not support box shadow );

The same element can be superimposed Using Multiple shadows. Box-Shadow: 2px 2px 5px #333333, box-

Shadow:-2px-8px 5px #333333 ;;

JS can use: obj. style. webkitboxshadow = value (string); obj. style. Required boxshadow = Value

(String); obj. style. boxshadow = value (string );
(2) Border-radius rounded Corner Effect
However, the browser currently has little support

Background:
(1) Background-origin: border | padding | content

Value: border. The background is displayed from the border area.
Padding: displays the background from the padding area.
Content: displays the background from the content area.
Currently, only the IE family does not support the kernel. other browsers support the kernel.
(2) Background-clip: border-box | padding-box | content-box | no-clip
Border-box: crop the background from the border area.
Padding-box: crop the background from the padding area.
Content-box: crop the background from the content area.
No-clip: crop the background from the border area.

(2)
Background-size: [<length >|< percentage> | auto] {1, 2} | cover | contain
Length>: A length value composed of floating-point numbers and unit identifiers. It cannot be a negative value.
<Percentage>: The value ranges from 0% to 100%. It cannot be a negative value.

Set the size of the background image.

Specifies the background size in pixels or percentages. When the percentage is specified, the size is determined by the width and height of the region.

And the location of background-origin. You can also use cover and contain to scale images.

.
For example, background-size: 100% 80px the image here will be in the same width as Div, with a height of 80 PX;