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

This article mainly introduces how CSS3 uses the new border properties to make the effect of closing the door, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article, so let's take a look at it.

Border: width type color decimal is not supported

Border-width: width of the border thin thin

Medium default

Thick thick

Not commonly used

Numerical px

Border-style:none has no border = hidden (except for tables, which is used to resolve table border conflicts)

Solid solid linetype

Dotted dot

Dashed dotted line

Double double wire

Border-color: hexadecimal # fff transparent transparent

Border: 1px solid # 000

Border-top: 1px solid # 000; top border

Border-top-width

Border-top-style

Border-top-color

Border-right:

Border-bottom:

Border-left:

New properties of css3

Border-image: use pictures to fill the border

Border-image-source: the source and path of the picture

Border-image-slice: how to segment a picture

Border-image-width: the width of the picture

Border-image-outset: picture extension

Border-image-repeat: the picture is repeated

Effect realization code:

* {padding: 0 margin: 0;}

# box {

Width: 300px

Height: 400px

Background: url (img/05.jpg)

Background-size:cover

Margin: 150px auto

Position: relative

Overflow: hidden

}

.left {width: 100%

Height: 100%

Background: rgba (122, 0penny, 0. 5)

Position: absolute

Top: 0

Left:-100%

Transition: all 2s

}

.right {

Width: 100%

Height: 100%

Background: rgba (0re0pence135pr 0.5)

Position: absolute

Top: 0

Left: 100%

Transition: all 4s

}

# box:hover .left {

Left:-50%

}

# box:hover .right {

Left:50%

}

Thank you for reading this article carefully. I hope the article "CSS3 how to use the new border attribute to make the effect of closing and opening doors" shared by the editor will be helpful to everyone. At the same time, I also hope that 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.