How to set the border in CSS3
This article mainly introduces how to set the frame in CSS3, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.
With CSS3, you can create rounded borders, add shadow boxes, and act as a border image without using a design program such as Photoshop.
Here you will learn about the following border properties:
Border-radius
Box-shadow
Border-image
CSS3 fillet
Adding rounded corners to CSS2 is tricky. We have to use different images in every corner.
In CSS3, it is easy to create fillets.
The border-radius attribute is used to create fillets in CSS3:
This is a rounded border!
Example
Add a fillet element to div:
Div
{
Border:2px solid
Border-radius:25px
}
CSS3 box shadow
The box-shadow property in CSS3 is used to add shadows:
Example
Add box-shadow attribute to div
Div
{
Box-shadow: 10px 10px 5px # 888888
}
CSS3 border picture
With the border-image property of CSS3, you can use the 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:
Use pictures to create borders in div:
Example
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 * /
}
New Border Properties
Property indicates that CSSborder-image sets shorthand properties for all border images. 3border-radius A shorthand property for setting all four border-*-radius properties 3box-shadow appends the shadow of one or more drop-down boxes
Thank you for reading this article carefully. I hope the article "how to set frames in CSS3" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
