CSS3 borde

wang xiao bo 's photo
wang xiao bo
·

3 min read

CSS3 border

With CSS3, you can create rounded borders, add shadow boxes, and use as border images without using design programs such as Photoshop. In this chapter, you will learn about the following border properties:

  • border-radius
  • box-shadow
  • border-image

CSS3 rounded corners Adding rounded corners in CSS2 is tricky. We have to use different images in each corner. In CSS3, it is easy to create rounded corners. In CSS3, the border-radius property is used to create rounded corners: This is a rounded border! Add rounded corner elements in the div:

div
{
border:2px solid;
border-radius:25px;
}

CSS3 box shadow Add the box-shadow attribute to the div

div{
box-shadow: 10px 10px 5px #888888;
}

CSS3 border image With the border-image property of CSS3, you can create a border using an image: The border-image property allows you to specify a picture as a border! The original image used to create the above border: Use pictures to create borders in divs:

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 rounded corners

Using the CSS3 border-radius property, you can make "rounded corners" for any element. The following are three examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>learn css </title> 
<style> 
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners3 {
    border-radius: 25px;
    background: url(/images/paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
</head>
<body>

<p> border-radius Attribute allows adding rounded corners to the element。</p>
<p>Specify the rounded corners of the background color element:</p>
<p id="rcorners1">Fillet</p>
<p>Specify the rounded corners of the border element:</p>
<p id="rcorners2">Fillet</p>
<p>Specify the rounded corners of the background image element:</p>
<p id="rcorners3">Fillet</p>

</body>
</html>

CSS3 border-radius-specify each rounded corner If you specify only one value in the border-radius property, 4 rounded corners will be generated. However, if you want to specify one by one on the four corners, you can use the following rules: Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.

Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner

Two values: the first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner

One value: the four rounded corners have the same value

CSSCSS3