By CSS3, we can create rounded corners, add a shadow to a rectangle, use images to draw the border. And without the use of design software, such as photoshop.
1 frame picture border-image
border-image as a picture frame application, the name suggests is a picture application background image. It is our common background attribute is quite similar, but more complex off than the background image. E.g:
background: url(“image.jpg”) 10px 20px no-repeat;
border-image attribute is a shorthand property used to set the following properties, particularly as described in Table 1:
Table 1 CSS3 border-image property Description
Imagine: a rectangle with four border. If the application is a frame picture, picture of the distribution of how it? Pictures will be automatically divided into four equal parts, for the four border.
Understandable border-image is a slice tool that will automatically be used as the border of the picture cut. How cutting it? To facilitate understanding, below a specific image, nine squares (a diagonal length of 70 pixels) makes up a map (210 * 210 pixels), and serial number marked good, as the legendary squares, as follows:
The image is applied to a rectangular frame, and so extending frame picture mode is set to repeat, as follows:
Run the above code, we can see that the rectangular frame into a picture. As shown in Figure 1:
Figure 1 picture frame
Div can be seen from the number corresponding to the four corners of each of the four corners 1,3,9,7 background image. And 2,4,6,8 are repeated four sides. Because it is cut from the surrounding images to the center, so 5 does not show up. In the above example border-image three parameters, the first parameter "url (border.png)" represents a frame picture introduction path; a second parameter "70" indicates the width of cut images, in pixels, but generally will be omitted units, the percentage may be used, when the four sides of equal width may use a value, when the set value of four clockwise to follow the rules are provided; third parameter "repeat" mode extends represents a repeating image, there may be three parameter selection round (tile), repeat (repeat), stretch (stretch).
repeat的意思就是重复，因为上述例子中的边框宽度正好数字块宽度，效果不能很好地体现出来，下面改变div的宽度，再看看repeat的效果，修改后CSS的样式如下：
这里我们将div的宽度缩小了30px变为180px，在浏览器中查看效果如图2所示：
图2 边框图片repeat重复
在图2里，我们可以看出矩形的边角部分被裁掉了，repeat就是从边框的中间一直重复并且超出部分被裁掉。
再来设置为div的border-image-repeat设置round，round可以理解为圆满的铺满，为了实现圆满所以会压缩（或拉伸），将上述例子的延伸方式改变，修改的CSS代码如下：
这里我们将边框图片的延伸方式修改为round，在浏览器中查看效果如图3所示：
图3 背景图片平铺（round）
对比repeat的效果，我们可以发现round的图片被压缩了，并没有被截取。
接下来设置为div的border-image-repeat设置stretch，stretch是拉伸，将上述例子的延伸方式改变，修改的CSS代码如下：
将CSS替换后，运行上述代码，可以发现边框图片被拉伸，而不是重复。在浏览器中查看效果如图4所示：
图4 边框图片拉伸（stretch）
2 自适应的圆角效果
实现该效果时使用的图片如下：
此图片的剪裁宽度为20像素，基本上就是此图的圆角大小。div的边框宽度为10像素，代码如下：
运行上述代码，div的边框实现了上面图片制作的圆角效果。在浏览器中查看效果如图5所示：
图5 自适应圆角效果
同样地，我们还可以使用图片来实现多边框效果，投影效果和选项卡效果等。
1．使用下面图片实现多边框效果
使用上面的代码，修改边框图片，在浏览器中查看效果如图6所示：
图6 多边框效果
2．投影效果
使用下面图片实现投影效果，投影可以控制剪裁宽度和边框宽度。
使用border-image实现的效果如图7所示：
图7 投影效果
border-image can be said to be a very important part in CSS3, will shine in the future, its application potential is really very impressive, but limited browser currently supports only FireFox, chrome browser, Safari3 + support.