CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
border-radius
box-shadow
border-image
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property
IE
Chrome
Firebox
Safari
Opera
border-radius
9.0
5.0
4.0 -webkit-
4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5
box-shadow
9.0
10.0
4.0 -webkit-
4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
border-image
11.0
16.0
4.0 -webkit-
15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-
CSS3 The border-radius Property - Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
This box has rounded corners!
Example
Add rounded corners to a <div> element:
div {
border: 2px solid;
border-radius: 25px;
}
CSS3 The box-shadow Property
In CSS3, the box-shadow property is used to add shadow to boxes:
Example
Add a box-shadow to a <div> element:
div {
box-shadow: 10px 10px 5px #888888;
}
CSS3 The border-image Property
With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
The original image used to create the border above:
Example
Use an image to create a border around a <div> element:
div {
-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 30 round;
}
CSS3 Border Properties
Property
Description
CSS
border-image
A shorthand property for setting all the border-image-* properties
3
border-radius
A shorthand property for setting all the four border-*-radius properties
3
box-shadow
Attaches one or more drop-shadows to the box
3
ليست هناك تعليقات:
إرسال تعليق