CSS3 border design

 CSS3 has a more powerful border design function than CSS2, including three new attributes, namely border-radius for designing rounded rectangles , box-shadow for designing shadow effects, and border-image for designing picture border effects . Using these three new CSS3 border attributes, web designers can quickly make beautiful element borders, and there is no need to use traditional Photoshop or GIMP to design these effects, except for border-image, which needs to be prepared first. In addition, almost no drawing software is used, and because these three frame design effects are really easy to use, they are supported by most mainstream browsers, such as the latest version of IE, FireFox, Chrome, Opera, Safari.. . Wait, this article will introduce the basic examples of these three CSS3 border attributes. You can enter the detailed introduction page of each attribute from each example to read.

CSS3 border design example 1. Design the border-radius property of a rounded rectangle

<div style="border:2px green solid;border-radius:5px;width:460px;height:50px;background-color:#eee;">
CSS3 border-radius rounded corner effects
</div>

The actual effect of the example

CSS3 border-radius rounded corner effects

The first example is to apply the border-radius property of CSS3 to the DIV block to modify the default four vertical corners of the DIV block to make the visual effect of rounded corners. Traditional rounded borders are usually made by drawing software, but CSS3 The border-radius obviously provides a more efficient design solution.

Detailed introduction: CSS3 rounded border-radius .

CSS3 border design example 2: box-shadow property of design shadow effect

<div style="box-shadow:3px 3px 3px 12px pink;width:460px;line-height:100px;text-align:center;">
CSS3 box-shadow shadow effect
</div>

The actual effect of the example

CSS3 box-shadow shadow effect

The second example applies the box-shadow property of CSS3 to the DIV block and adds a pink shadow effect to this block. Isn't it pretty? Strictly speaking, box-shadow is not a part of CSS3 border design, it can only be regarded as a new feature, but the visual effect of box-shadow is usually in the part of the border, so I will introduce it together.

Detailed introduction: CSS3 box-shadow

CSS3 border design example 3. Design the border-image property of the picture border effect

<style>
div{
    border:20px solid transparent;
    width:330px;
    padding:20px;
}
#NewImgBorder{
    -moz-border-image:url(picture URL) 30 30 round; /* Show Firefox*/
    -webkit-border -image:url(picture URL) 30 30 round; /* Show it to Safari and Chrome*/
    -o-border-image:url(picture URL) 30 30 round; /* Show it to Opera*/
    border-image:url( Image URL) 30 30 round;
}
</style>
<div id="NewImgBorder">CSS image-border attribute example</div>

The actual effect of the example

CSS image-border property example

Example 3 is a very special function. From the actual effect of the example, you can see that this DIV block has a beautiful picture frame. The frame effect is really the effect shown by a picture, but the special place lies in the original The picture is actually just a small picture. The size is completely different from the DIV block . We set it through the border-image property of CSS3 to make the small picture match the size of the large DIV block and become a pretty beautiful DIV block . Under the traditional web design technology, the effect must also be produced by drawing software.

Detailed introduction: CSS3 border-image property❉

Postscript

The advantages of the above three new CSS3 border design features must have been known to readers. How to apply it to web design depends on the ingenuity of the designers! Finally, if you want to get more web design technical sharing information, welcome to join our fan group.