This time I will bring you the border, background and text effects of css3. What are the precautions when using the border, background and text effects of css3. The following is a practical case, let’s take a look.
Simple play with CSS3 borders, background, and text effects
1. Border
box-shadow
1 2 3 | box-shadow: h-shadow v-shadow blur spread color inset(ontset);
box-shadow: 5px 0 5px 0 #000 outset;
|
Copy after login
border-radius rounded corners
1 2 3 | border-radius: 1-4 length|% / 1-4 length|%;
border-radius: 50%/20%;
|
Copy after login
Can be achieved by setting different border rounded corners A variety of border boxes
border-image
1 2 | border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
|
Copy after login
2. Background
background-size Specifies the background image size
1 2 | background-size: length|percentage|cover|contain;
|
Copy after login
background-clip Specifies the "drawing" area of the background
1 | background-clip: border-box|padding-box|content-box;
|
Copy after login
background- origin Specifies the "positioning" area of the background image
1 | background-origin: padding-box|border-box|content-box;
|
Copy after login
PS: Pay attention to the difference between background-origin and background-clip. One is the positioning area and the other is the drawing area
3. Text-shadow
1 | <span style= "color: #800000" >text-shadow: h-shadow v-shadow blur color;<br>
|
Copy after login
word-wrap Allows long indivisible words to be split and wrapped to the next line
1 | <span style= "color: #800000" >word-wrap: normal| break -word;<br>
|
Copy after login
word-break Specifies the line break rules for non-Chinese, Japanese and Korean text
1 2 | word- break : normal| break -all|keep-all;
|
Copy after login
I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to operate the unordered list attribute in JS
Safari browser select drop-down list text is too long and does not wrap Solution
The above is the detailed content of css3 borders and backgrounds and text effects. For more information, please follow other related articles on the PHP Chinese website!