Border and background of Css3 new features (1) and border of css3 New Features Summary
This series summarizes some of Css3's new features, derived from the css secret book.
I. translucent border
- Css3 is best to use hsla instead of rgba. hsla is: h: color value (0 ~ 360); s: satiety (0% ~ 100%); l: brightness (0% ~ 100%); a: transparency (0 ~ 1)
- Background-clip: Specifies the cropping background color. The default value is border-box (the background color spreads to border) and padding-box (the background color spreads to padding ); content-box (Extended background color to content)
- Sample Code:
Width: 200px; height: 200px; background: rebeccapurple; border: 10px solid hsla (300, 0%, 50%, 0.5); background-clip: padding-box; // remove and add this item to see the effect
II. Implementation of Multiple Borders
- Box-shadow: sets or retrieves the object shadow. Format: box-shadow: none | <length> {2, 4} & color? | Inset?
- Length <1>: horizontal offset, negative value
- Length <2>: vertical offset, negative value
- Length <3>: Shadow blur value, which cannot be negative.
- Length <4>: the extension length, which can be negative.
- <Color>: shadow color
- Inset: indicates the inner shadow. If it is null, it indicates the outer shadow.
- You can set multiple groups of effects and separate them with commas (use box-shadow overlapping to set multiple borders, but the border style cannot be set as a stripe or a dotted line)
- To retrieve text shadows, use the text-shadow attribute.
- Outline implements two borders (only two borders can be implemented, but the border style is flexible)
Iii. Background Positioning
- Background-position: Specifies the background. The values are described as follows:
- Center, left, top, bottom, right, and so on all indicate where the background is displayed. If you set repeated tile settings, different results will be displayed.
- Value is a numerical value or percentage: background-position: right 20px bottom 30px;
- Background-origin: positioning parameters of the background image, including context-box, padding-box, and border-box.
- Clac () function for calculating the 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);padding: 10px;
Iv. Multiple rounded border
- Box-shadow: the rounded corner follows the border-radius, but the outline does not.
- The box-shadow formula is as follows: stock theorem. It must be greater than this value when shadow is set.
- Sample Code:
margin: 10px auto;width: 10em;height: 8em;background: tan;border-radius: .8em;padding: 1em;box-shadow: 0 0 0 .6em #655;outline: .6em solid #556;
