The first wave of css3 practice: Let's enjoy the rounded corner

If the model and browser adaptation of WAP2.0 web pages pose a huge psychological shadow to our wireless Production Manager, from high-end mobile phone applications such as iPhone and Android, we are glad that we have ushered in a new era ahead of our peers. the safari mobile and Google Android browsers on these two high-end mobile phones have almost perfect rendering effects, it gives css3 a place to play.

Before css3, or before WebKit took an absolute advantage, the rounded corner is a tangle of dead corners for the production manager. Nine squares, N-layer Div nesting, 18-way cutting of an image, or even threatening the designer: If you do the rounded corner, I will show it to you! Well, in the era of high-end mobile phones, all these complaints can be left behind. One HTML element and several lines of CSS can all be done. Now we can embrace the designer and announce out loud: Let's enjoy the rounded corners! Things should begin with our first high-end mobile phone web application-mobile Weibo high-end version. As a web project completely targeting high-end mobile phones, we have initially tested it, the vast majority of the attributes of css3 can be perfectly represented on browsers of iPhone and Android mobile phones. So, don't wait for a while ?! Therefore, our design Gg has a painful rounded corner experience. Please refer to these rounded corners:

There are two new methods to achieve rounded corner in css3: border-raidus and border-image. The former suitable background is filled with solid color, or it can be tiled regularly with solid color border elements, for example:

For this type of rounded corner elements, we only need to define the background, border, and corner angle. Take this button element as an example:

The background slice btn_bg.png and the Image Width ranges from 1px to 100px. To reduce tile resource consumption or save traffic, please be sure:

This button is completeCodeYes:

<Style type = "text/CSS">
. BTN-send {
Display: inline-block;
Background: URL (blogimg/btn_bg.png) Left top repeat-X;
Border: 1px solid # 96b9de;
-WebKit-border-radius: 3px;
-Moz-border-radius: 3px;
Height: 28px;
Line-Height: 28px;
Padding: 0 9px;
Text-Decoration: none;
Color: #000000;
Font-size: 12px;
Font-weight: bold;
Text-Shadow: 0px 0.5px 0.5px # ffffff;
}
</Style>

<A href = "#" class = "BTN-Send"> send a private message </a>
 

Among them, the attribute starting with WebKit takes effect for the WebKit kernel browser, that is, our iPhone and Android high-End Server comes with the browser. The attribute starting with-Moz is mainly because debugging is generally performed in Firefox, added to display normal results during debugging. Some people will add border-radius, which probably takes effect for chrome and ie9. It is useless for browsers on high-end mobile phones. Let's discard it first.

In addition, it must be noted that, as the name suggests, border-radius is required only when border is available. When border-radius is set, border-width cannot be 0. In this way, we can define a rounded corner for the image. Please stop it!

Objects with only half edges and rounded corners can also be defined separately. The attributes of each rounded corner can be defined separately in WebKit and Moz as follows:

-WebKit-border-top-left-radius: 5px;
-WebKit-border-top-right-radius: 5px;
-WebKit-border-bottom-left-radius: 5px;
-WebKit-border-bottom-right-radius: 5px;
-Moz-border-radius-topleft: 5px;
-Moz-border-radius-topright: 5px;
-Moz-border-radius-bottomleft: 5px;
-Moz-border-radius-bottomright: 5px;
 

Border-image is suitable for the rounded corner elements that cannot be completely tiled and filled with the color value. As the name suggests, this attribute actually uses a basic rounded corner image to achieve the effect of the rounded corner. For example:

This type of element is more or less. Because the shadow and luminous effect of one or two pixels cannot be completely tiled, we can use the square lattice principle of border-image to define the background, border frame, and rounded corner of an image. The disadvantage of this method is that the border, rounded corner, and background are fixed on the image, and the width of the element can only be stretched horizontally or vertically. The angle and element height or width cannot be modified directly through CSS. Even so, we would like to thank this CSS attribute for its brand new experience.

Take this button as an example:

Its background is such an inner light and shadow style. If it is tiled, the shadow is better to say, but the inner light on the left is hard to handle:

The principle of border-image is to break down this type of image into a nine-square lattice:

Among them, 1, 3, 7, and 9 are the backgrounds of the four corners;

2, 4, 6, and 8 serve as the background of the four sides. If you do not want to change the design texture of the original button, you can only stretch the two or eight sides horizontally;

The middle 5 serves as the background of the middle part. Similarly, to maintain the design texture, it can only be horizontally stretched.

Border-image is written as follows:

-WebKit-border-image: URL (blogimg/border.png) 5 5 5 repeat;
-Moz-border-image: URL (blogimg/border.png) 5 5 5 repeat;
 

The first parameter is the image path;

The 2-5th parameter is the distance from the top, right, bottom, and left of the Nine-square-lattice split. It can be abbreviated as 1-3. Note that the value here is not in unit (the effect is not displayed several times, after checking for half a day, we found that PX and cup are habitually added here, but the percentage can be used;

The last two parameters are repeated in the image X and Y directions, including round (tiled), repeat (Repeat), and stretch (stretch). The default value is stretch, it can be abbreviated to 0-1.

For Commonly Used buttons, the effects are the same in horizontal layout, regardless of tile, repetition, or stretch.

The complete code for this button is as follows:

 
<Style type = "text/CSS">
. BTN-more {display: inline-block;
-WebKit-border-image: URL (blogimg/btn_2_bg.png) 5;
-Moz-border-image: URL (blogimg/btn_2_bg.png) 5;
Border-width: 5px;
Height: 27px;
Line-Height: 27px;
Padding: 0 60px;
Text-Decoration: none;
Color: # ffffff;
Font-size: 13px;
Font-weight: bold;
Text-align: center;
Text-Shadow: 0px 0.5px 0.5px #000000;
} </Style>
<P> <a href = "#" class = "BTN-more"> View More </a> </P>
 

Note: Here, border-width must be used together to correspond to the width of the Four Edges separated by the nine cells. In fact, even if the nine squares are split out of four sides, we can choose not to use any of them, as long as we can set the border-width of this edge to 0, this is useful for using a complete rounded corner image to implement a pair of halfwidth buttons:

In addition, in the case of border-image, the border defining other styles is invalid.

Well, in the end, we would like to thank the country, the organization, the iPhone, and Steve Jobs. This is a great practical opportunity! We hope that the web standards will take over the world as soon as possible, so that we can truly enjoy the beautiful world of css3!

(This article is from the Tencent WSD blog. Please indicate the source when reprinting)