Css3 border, background, text effect, and css3 border

Css3 border, background, text effect, and css3 border
Simple play CSS3 border, background, text effect 1, border box-shadow

Box-shadow: h-shadow v-shadow blur spread color inset (ontset); // h-shadow: horizontal shadow v-shadow: vertical shadow blur: fuzzy distance spread: shadow size color: shadow color inset (outset): Internal shadow/external shadow
Box-shadow: 5px 0 5px 0 #000 outset; //

Border-radius rounded corner

Border-radius: 1-4 length | %/1-4 length | %; // first parameter: horizontal radius second parameter: vertical radius border-radius: 50%/20%; // as follows

You can set different border rounded corners to implement a variety of border boxes.

Border-image

Border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat // border image url inside the border offset border width border image area beyond the border repeated), rounded, stretched)

Ii. background-size specifies the background image size

Background-size: length | percentage | cover | contain; // length: Set the width and height of the background image. percentage: Set the width and height of the background Image Based on the parent element percentage. cover: the background image is expanded to be large enough to completely overwrite the background image. contain: expands the image to the maximum size, so that its width and height fully adapt to the content area.

Background-clip specifies the "Draw" Area of the background

background-clip: border-box|padding-box|content-box;

Background-origin specifies the "location" Area of the background image

background-origin: padding-box|border-box|content-box;

PS: note the difference between background-origin and background-clip. One is the positioning area and the other is the drawing area.

 

3. text effect text-shadow text shadow effect

Text-shadow: h-shadow v-shadow blur color;
// H-shadow: horizontal shadow v-shadow: vertical shadow blur: fuzzy distance color: shadow color
Text-shadow: 5px 5px 3px #000; //

Word-wrap allows you to split long words and wrap them to the next line.

Word-wrap: normal | break-word;
// Normal: only break the line at the allowed break Point break-word: line feed within a long word or url address

Word-break specifies the line feed rules for non-Chinese-Japanese text

Word-break: normal | break-all | keep-all;
// Normal: Use the browser's default line feed rule break-all: Allow line breaks in words.