Graphic css3--3rd CSS3 border-1 "

Source: Internet
Author: User

referring to the border, the first thing you think of is the CSS boder property. Yes, border attributes are one of the underlying properties of the CSS seed box model. In CSS3, what is the difference between the use of borders? And how will it be used? In this chapter we begin our CSS3 border tour with these questions.

3.1 CSS3 Frame Introduction

borderAttributes are already defined in CSS1 and can be used to set the border style of an element.

3.1.1 Basic properties of a border

The border properties in CSS1 and CSS2 are really simple and consist of three types of values.

    1. border-width: Sets the thickness of the element's border.
    2. border-color: Sets the color of the element's border.
    3. border-style: Sets the type of the element border.

In practice, the above three attributes can be combined together with the following abbreviated syntax:

border: border-width border-style border-color;

Each attribute is separated by a space after the abbreviation, and there is no order between them, but the only value that is required here is "" in three values border-style .

3.1.2 Type of border

| Property values | Function Description | Sample Code | |---|---|---| |none| Define No Border |.ele{border:none;}| |hidden| andnone"Is the same, except when applied to a table,hiddenUsed to resolve Border conflicts |.ele{border:hidden;}| |dotted| Defining a Point Border |.ele{border: 3px dotted red;}| |dashed| Define a dashed border |.ele{border: 3px dashed red;}| |solid| Define a solid border |.ele{border: 3px solid red;}| |double| Define two lines. The width of the double line equalsborder-widthValue of |.ele{border: 3px double red;}| |groove| Defines a 3D groove border, and its effect depends onborder-colorValue of |.ele{border: 3px groove red;}| |ridge| Defines a 3D ridge border, and its effect depends onborder-colorValue of |.ele{border: 3px ridge red;}| |inset| Definition 3DinsetBorder, the effect depends on theborder-colorValue of |.ele{border: 3px inset red;}| |outset| Definition 3DoutsetBorder, the effect depends on theborder-colorValue of |.ele{border: 3px outset red;}| |inherit| Specifies that the border style should be inherited from the parent element. Some browsers do not support this property value |.ele{border: 3px inherit red;}|

Chrome

360 Secure Browser Haste mode

360 Secure Browser compatibility mode

Firefox

IE11

IE10

IE9

IE8

IE7

None of the above IE78910 uses the native IE test, but instead uses the test IE11 's own IE78910.

Graphical css3--3rd CSS3 border-1 "

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.