Css3 _ quickly understand border-Image

ArticleDirectory

• Rounded corner
• Drop Shadow
• Tab
• Multiple buttons

When reading this attribute, it seems that Chinese articles have not been too clear to everyone. Let's talk about it today.

Whitebutton.png

 

Then we want to achieve this effect:

 

Code(Haha! Please do not worry, continue to look down):

 Code

< Div Style = "-WebKit-border-image: URL (images/whitebutton.png) 0 12 0 12 stretch;
-Moz-border-image: URL (images/whitebutton.png) 0 12 0 12 round stretch;
Border-image: URL (images/whitebutton.png) 0 12 0 12 stretch;
Display: block;
Width: 600px;
Border-width: 0 12px;
Padding: 10px;
Text-align: center;
Font-size: 16px;
Text-Decoration: Inherit;
Color: White; + color: black ;" > In the safari3 +, ff3.5, chrome5.0 +, and opera10.53 browsers, you can see the border background image. </ Div >

Let's talk about the basic knowledge below:

I. Definition:Border-Image:None| <Image> [
<Number> | <percentage>] {1, 4} [/<border-width> {1, 4}]? [
Stretch | repeat | round] {0, 2}

 

None:

Default value. No background image.

<Image>:

Specify the background image using an absolute or relative URL.

 

 <Number>:

The Border width is expressed by fixed pixel values.

<Percentage>:

The Border width is expressed in percentage.

[Stretch | repeat | round]:

Stretch | duplicate | tile (stretch is the default value .)

Take a look at the CSS code.

 

That is:

They intercept the image in the form of #, and then use stretch | repeat | round to control the horizontal or vertical effect. You will understand it.

  

 

Of course, you can also use % for the Border width. The principle is also the same:

 

Now, you should understand what the border-image is like.

Some examples

Rounded cornerBorderimage

 
Border-width: 10px;
 

 
Border-image: URL ("Media/roundedcorner.png") 20;
 

Ninja!

 
Border-width: 20px;
 

 
Border-image: URL ("Media/border.png") 20;
 

Drop Shadow Wooooosh

 
Border-width: 10px;
 

 
Border-image: URL ("Media/blackshadow.png") 5;
 

Tab Katanas

 
Border-width: 15px 20px 0;
 

 
Border-image: URL ("Media/tab.png") 20 20 0;
 

Learn
To be
Lazy

 
Border-width: 10px 10px 0;
 

Border-image: URL ("Media/gradient.png") 10 10 0;
 

Multiple buttons Hover & click

 
But not impossible.
 

 
This one is tricky.
 

Reference: www.lrbabe.com/sdoms/borderimage/

Ejohn.org/blog/border-image-in-firefox/