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

This article mainly explains "how to use the border properties in CSS3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the border attributes in CSS3".

Css3 border

(1) Border Shadow

Box-shadow:h-shadowv-shadowblurspreadcolorinset

Hshadowmagnet v shadow: horizontal and vertical shadow positions, you can write negative values.

Blur: blur distance (the higher the value, the more blurred).

Spread: size of shadow

Color: color of shadow

Inset: change external shadows (outset) to internal shadows

The first two values are required, and the last four values are optional

Div {

Width:100px

Height:100px

Background-color:pink

Box-shadow:10px10px10pxgray

}

Image16.jpg

(2) Border picture

Border-image:srcslicewidthoutsetrepeat

Src: the path to the picture.

Slice: the frame of the picture is offset inward.

Width: the width of the picture border.

Outset: the amount by which the border image area exceeds the border.

Repeat: whether the image frame should be tiled (repeated), filled (rounded), or stretched (stretched)

Pay attention to browser compatibility issues

Div {

Border:20pxsolidtransparent

Width:100px

Height:50px

Line-height:50px

Text-align:center

Padding:10px20px

Border-image:url (images/12.png) 5050round

-moz-border-image:url (images/12.png) 5050 Firefox /

-webkit-border-image:url (images/12.jpg) 5050 racemaker safari and Chrome*/

-o-border-image:url (images/12.png) 5050 RMB /

}

Image21.jpg

(3) Border fillet

Border-radius

Div {

Width:150px

Height:30px

Border:2pxsolid#ccc

Border-radius:25px

Line-height:30px

Text-align:center

}

Thank you for your reading, the above is the content of "how to use the border properties in CSS3". After the study of this article, I believe you have a deeper understanding of how to use the border properties in CSS3. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.