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

This article mainly shows you "css how to set the frame style", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to set the frame style of css" this article.

One: the basic style of border border lines

Border style properties specify what boundaries to display

1.border-style attribute

None: no border by default

Dotted: define a dotted border

Dashed: define a dashed border

Solid: define solid border

Double: defines two borders. The width of both borders is the same as the value of border-width

Groove: defines a 3D groove border. The effect depends on the color value of the border.

Ridge: defines the 3D ridge border. The effect depends on the color value of the border.

Inset: defines a 3D embedded border. The effect depends on the color value of the border.

Outset: defines a 3D highlight border. The effect depends on the color value of the border.

Border-style attribute

.demo {width:500px;height:500px;margin:50pxauto;}

P.none {border-style:none;}

P.dotted {border-style:dotted;}

P.dashed {border-style:dashed;}

P.solid {border-style:solid;}

P.double {border-style:double;}

P.groove {border-style:groove;}

P.ridge {border-style:ridge;}

P.inset {border-style:inset;}

P.outset {border-style:outset;}

P.hidden {border-style:hidden;}

No borders.

Dotted border.

Dotted border.

Solid border.

Double-sided box.

Grooved frame.

Ridge border.

Embed the border.

Convex border.

Hide the border.

Effect picture:

1.jpg

The above example is to set the top, bottom, left and right borders at the same time, or you can set a separate border on one side: border-top-style (top border), border-bottom-style (bottom border), border-left-style (left border), border-right-style (right border).

2.border-width attribute

There are two ways to set the width of a border: you can specify a length value, such as 2px or 0.1em (in px,pt,cm,em, and so on), or use one of three keywords, which are thick, medium (the default), and thin.

Border-width attribute

.demo {

Width:500px

Height:500px

Margin:50pxauto

}

.one {

Border-style:solid

Border-width:5px

}

.two {

Border-style:solid

Border-width:medium

}

.three {

Border-style:solid

Border-width:1px

}

Some text.

Some text.

Some text.

The above is all the content of the article "how to set the frame style of css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.