Styling Block Elements Có rất nhiều phong cách mà bạn có thể áp dụng để chặn các yếu tố để biến đổi sự xuất hiện của họ có vượt qua được những phong cách điển hình CSS2. Chúng bao gồm ba cái gọi là tính thực nghiệm (-webkitborder-image, -webkit-border-radius, and -webkit-appearance và tăng cường một CSS3 của nền tài sản. Đây là những mô tả trong phần này. | Chapter 4 Styling with CSS Styling Block Elements There are several styles that you can apply to block elements to transform their appearance that go beyond the typical CSS2 styles. These include three so-called experimental properties -webkitborder-image -webkit-border-radius and -webkit-appearance and a CSS3 enhancement of the background property. These are described in this section. Image-Based Borders with -webkit-border-image The -webkit-border-image property enables you to use an image to specify the border rather than the border-style properties. The image appears behind the content of the element but on top of the background. For example -webkit-border-image url 7777 The four numbers that follow the image URL represent the number of pixels in the image that should be used as the border. The first number indicates the height of the top both the corners and edge of the image used. Per CSS conventions the remaining three numbers indicate the right bottom and left sides. Pixel is the default unit though you can specify percentages. If the image URL you provide cannot be located or the style is set to none then border-style properties are used instead. One or two keywords can be optionally specified at the end of the declaration. These determine how the images for the sides and the middle are scaled and tiled. The valid keywords are stretch or round. If stretch is used as the first keyword the top middle and bottom parts of the image are scaled to the same width as the element s padding box. Far less common for iPhone use round can also be used as the first keyword. When used the top middle and bottom images are reduced in width so that a whole number of the images fit in the width of the padding box. The second keyword acts on the height of the left middle and right images. If both keywords are omitted then stretch stretch is implied. When rendered the Mobile Safari browser looks at the -webkit-border-image property and divides up the image based on .
