CSS3 about fillets and shadows, as well as border pictures and in-box subtraction

Rounded Corners: Border-radius
Shadow: Box-shadow
Border Picture: Border-image
Box inside minus: Box-sizing:border-box;

Fillet: Border-radius: pixels/percent

A value is set to the box's four corners of the horizontal and vertical radii of each corner can be set independently, the order of values is left upper right up to the lower right and lower left clockwise setting can be abbreviated, logic with padding and margin units support pixels, and percentages (referring to the width and height)

You can control the radius individually with a horizontal radius/vertical radius, and each radius can be individually controlled

P:nth-child (5) {    border-radius:0px 200px;} P:nth-child (7) {    width:400px;    /* If there is a slash in the middle, the radius of the horizontal and vertical direction is controlled */    border-radius:200px/100px;

Capsule production: The value is greater than or equal to half of the short side, and more than half will not change.

p {        width:200px;        height:100px;        background-color:palevioletred;        border-radius:50px;    }

Shadow: Box-shadow: Value

Value Description:

First value: Npx the shadow shifts horizontally by n pixels the second value: Npx The shadow is vertically shifted n pixels the third value: Feather size Fourth value: Shadow dimension Fifth Value: Color (default black) sixth parameter: Inner and outer shadow (default is outer Shadow, inner Shadow is inset) shadow can write multiple , separated by commas in the middle

Shadows can be abbreviated, but there are some values that need to be 0

P:nth-child (8): hover{/    * Shadow can write multiple */    background-color: #000;    box-shadow:10px 10px 10px 2px red 20px 20px 10px 4px green,30px 30px 2px 6px Blue;}

Text Shadow

Syntax: Text-shadow: Horizontal offset vertical offset feather size color

Border Picture: Border-image: Value

Follow the nine format cut, up and down to a knife

Value Description:

Border-image-source:url (' border.png '); Picture path border-image-slice:26; picture cutting, do not bring units, follow the nine format Transduction method (up and down each to a knife) border-image-repeat:round or stretch or repeat; Round no flaws, stretch default stretch, repeat tile (possibly defective)

shorthand : Border-image:url (' border.png ')-round;

Inside Box minus: Box-sizing:border-box

content-box: padding and border are not included within the defined width and height. The actual width of the object is equal to the width value of the setting and the sum of border, padding, i.e. (Element width = width + border + padding)
This property behaves as a box model in standard mode.

border-box: padding and border are included within the defined width and height. The actual width of the object is equal to the width value of the set, even if the border and padding are defined, the actual width of the object is not changed, i.e. (Element width = width)
This property behaves as a box model in weird mode.

Vcq91q7suzwvcd4ncjxwcmugy2xhc3m9 "BRUSH:SQL;" >/*bootstrap set the style */*,*::before,*:after{border-sizing:border-box in the global;}

Small example: Implement two-column layouts that always have a 10px gap in the middle

<style type= "Text/css" >* {    padding:0;    margin:0;}. Left {    width:50%;    Float:left;    height:300px;    padding-right:5px;    Box-sizing:border-box;}. Right {    width:50%;    Float:left;    height:300px;    padding-left:5px;    Box-sizing:border-box;}. info {    width:100%;    height:100%;    Background-color:pink;