CSS3 new features summary border and background

This series summarizes Css3 some new features of the understanding, from the "CSS Secret" book.

One, translucent border

CSS3 best to use Hsla, not Rgba,hsla is: H: Color value (0~360); s: satiety (0%~100%); L: Brightness (0%~100%); A: Transparency (0~1)

Background-clip: Crop background color, default is border-box (background color spreads to border), Padding-box (background color spreads to padding); Content-box (background color extends to content)

Example code:

width:200px;height:200px;background:rebeccapurple;border:10px solid Hsla (0, 50%, 0.5);     Background-clip:padding-box; Remove and add the item to see the effect

Two, multi-border implementation

Box-shadow: Setting or Retrieving Object shadows, Format: Box-shadow:none | <length>{2,4} && color? | Inset?

LENGTH<1>: Horizontal offset, can be negative

Length<2>: Vertical Offset, negative

length< 3;: Shadow blur value, non-negative

Length<4>: epitaxial length, negative

<color>: Shadow color

Inset: Represented as inner shadow, empty for outer shadow

Multiple sets of effects can be set, separated by commas (using the Box-shadow overlapping feature to set the multi-border, but the border style is not made also stripes, dashes, etc.)

If you want to set the retrieve text shadow, use the Text-shadow property

Outline implements two borders (only double borders are possible, but the border style is flexible)

Third, the orientation of the background

Background-position: Background positioning, values described below

Center,left,top,bottom,right, and so on, is where the background starts to show, and if you set a repeating tile, you have different effects.

Values are either numeric or percentage: background-position:right 20px Bottom 30px;

Background-origin: The position parameter of the background picture, the three value Context-box,padding-box,border-box and so on.

CLAC () function to calculate width

The sample code is as follows:

Background-image:url ('.. /img/bck.png '); background-repeat:no-repeat;background-size:40px 40px;width:200px;height:200px;margin-top:10px; border:5px solid red;--background-position:right 0px bottom 0px;background-origin:content-box;background-position: Calc (100%-50px);p adding:10px;

Four, multi rounded border

Box-shadow: His fillet is going to follow Border-radius, and outline will not.

Minimum Shadow (Box-shadow) is calculated as: Pythagorean theorem, should be greater than this value when setting shadows

Example code:

margin:10px Auto;width:10em;height:8em;background:tan;border-radius:. 8em;padding:1em;box-shadow:0 0 0.6em #655; out Line:. 6em solid #556;

