Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.