Shulou(Shulou.com)06/01 Report--

This article mainly explains the "CSS3 frame border how to use", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS3 frame border how to use" it!

CSS3- frame border 1, fillet effect border-radius

How to use it:

Border-radius:10px; / * all corners use fillets with a radius of 10px * /

Border-radius: 5px 4px 3px 2px; / * the four radius values are upper left, upper right, lower right and lower left, clockwise * /

Don't think that the value of border-radius can only be used in px units, you can also use percentage or em.

12 3 4 5 6 7 8 border-radius 9 10 # box {11 width: 100px politics 12 height: 100px politics 13 background-color: aquamarine;14 border-radius: 5px politics 15} 16 17 # box1 {18 width: 100px politics 19 height: 100px politics 20 background-color: red 21 border-radius: 50% height 22} 23 24 # box2 {25 width: 100pxpolitical 26 height: 100pxpolitical 27 background-color: blue;28 border-radius: 5px 10px 20px 30pxpolitical 29} 30 31 # box3 {32 width: 50pxpolitic 33 height: 100pxpolitic 34 background-color: coral 35 border-radius: 50px 0px 0px 50pxscape 36} 37 38 39 40 41 add fillets to the square 42 43 44

45 46 solid circle 47 48 49

50 51 add different fillet amplitudes 52 53 54 to the four corners of the square

55 56 semicircle 57 58 59 60

Border-radius is practical

2. Border Shadow box-shadow

Box-shadow adds shadows to the box. One or more can be added. Syntax: box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extension radius] [shadow color] [projection method]; parameter introduction: note: inset can be written in the first or last parameter, other positions are invalid.

1. The difference between shadow blur radius and shadow expansion radius.

Shadow blur radius: this parameter is optional, and its value can only be positive. If the value is 0, the shadow does not have a blur effect. The higher the value, the more blurred the edge of the shadow.

Shadow expansion radius: this parameter is optional, and its value can be positive or negative. If the value is positive, the whole shadow is extended and enlarged, and when the value is negative, it is reduced.

2. X-axis offset and Y-axis offset can be set to negative values.

Note: if you add more than one shadow, just separate it with a comma

12 3 4 5 6 7 8 box-shadow 9 10 # box {11 width: 100px politics 12 height: 100px politics 13 box-shadow: 4px 2px 6px # 333333 width 14} 15 16 # box1 {17 width: 100px politics 18 height: 100px politics 19 box-shadow: 4px 2px 6px # 333333 inset 20} 21 22 # box2 {23 width: 100pxscape 24 height: 100pxscape 25 box-shadow: 4px 2px 6px # f00 Lecture 26-4px-2px 6px # 000 27 0px 0px 12px 5px # 33cc00 inset28} 29 30 # box3 {31 width: 100pxintang 32 height: 100px 33 box-shadow:-4px 2px 6px # 333333 2px 6px 34} 35 36 # box4 {37 width: 100px 2px 6px 38 height: 100px politics 39 box-shadow: 4px-2px 6px # 333333 40} 41 42 43 44 45 46 external Shadow 47 48 49 Inner Shadow 50 51 52 add multiple Shadows 53 54 55 X Axis offset negative 56 57 58 Y Axis offset negative 59 60 61 62 III, apply picture border-image for the frame

As the name implies, border-image applies a background image to the frame, which is similar to our commonly used background attribute.

The syntax of border-image:

Repeat just repeats all the time, then cuts out the excess part, and starts to repeat in the middle.

Round can be understood as fully paved. It will be compressed (or stretched) in order to achieve perfection.

Stretch is easy to understand is stretching, stretching as long as possible. How far is it? how far is it?

Webkit browsers seem to have no distinction between the round property and the repeat property, and the display effect is the same.

12 3 4 5 6 7 8 border-image 9 10 # box {11 width: 180px politics 12 height: 180px politics 13 background: # F4FFFA politics 14 border: 70px solid # ddd;15 border-image: url (/ img/1.png) 70 repeat16} 17 18 # box1 {19 width: 170px 20 height: 170px border 21 border: 70px solid;22 border-image: url (/ img/1.png) 70 round;23} 24 25 # box2 {26 width: 170px politics 27 height: 170px politics 28 border: 70px solid;29 border-image: url (/ img/1.png) 70 stretch 30} 31 32 # border_image {33 height: 100px 34 width: 450px 35 border: 15px solid # ccc;36 border-image: url (http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 30 round 37} 38 39 40 41 42 43 44 repeat (repeat) 45 46 47 round (tile) 48 49 50 stretch (stretch) 51 52 53 Please inlay a beautiful picture frame for me 54 55 56 57 58 Thank you for your reading. The above is the content of "how to use CSS3 frame border". After the study of this article, I believe you have a deeper understanding of how to use CSS3 frame border. The specific use situation still needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.