The fourth day of CSS depth

Source: Internet
Author: User
Tags border color

First, box style--border:

1. Border-width Border Width

such as: div{width:200px;height:100px;border-width:1px;}

2.border-color Border Color

such as: Div{width:200px;height:100px;border-color: #ccc;}

3.border-style Border Line

such as: Div{width:200px;height:100px;border-style:solid}

The above three can be written as an abbreviated form: div{width200px;height:100px;border:1px solid #ccc;}

4.border-radius rounded corners effect

such as: Div{width:200px;height:100px;background-color: #000; border-radius:10px; The top-left, top-right, bottom-right, and bottom-left corners have a rounded effect of 10px, which is a circle when 50%.

Extended:

5.border-image Border Picture

such as: div{border:10px solid Gray;border-image:url (...) 10/10px;}

6.box-shadow Box Shadow

such as:. Outset {box-shadow:5px 5px rgba (0, 0, 0,. 6);} /* External Shadow general Effect */

. outset-blur{box-shadow:5px 5px 5px 10px rgba (0, 0, 0,. 6);} /* Outer shadow blur epitaxial effect */

.   inset {box-shadow:2px 2px 5px 1px rgba (0, 0, 0,. 6) inset;} /* Inner Shadow Effect */

combining internal and external shadows, Pseudo-class hover available write down the button to press the sunken effect

Second, paragraph style:

1.line-height Line Height

such as: p{line-height:27px;} can also be used as a percentage, such as 150%

2.text-indent paragraph Indent

such as: P{TEXT-INDENT:2EM;}

3.text-align: paragraph alignment

such as: P{text-align:right;}

4.letter-spacing text Spacing

such as: p{letter-spaacing:5px;} Note: Use word-spacing between English words

5.text-overflow: Text Overflow

such as: div,input{

Overflow:hidden; /* Condition 1: Out of part hidden */

white-space:nowrap;/* Condition 2: Force all text to appear in the same line */

text-overflow:ellipsis;/* out-of-section display ... */

}

6.word-wrap: Paragraph Wrapping

such as: P{word-wrap:break-word;}

Third, the background style:

1.background-color background Color

such as: Body{background-color: #ccc;}

Other:

1.1 Colors of Rgba

such as: Div{width:200px;height:100px;background-color:rgba (255,0,0,.5);} Note: A is a transparent parameter, and the value is between 0~1 and not negative.

1.2 Gradient Colors

such as: Div{background-image:linear-gradoent (to left,red 30%,blue);}

2.background-image background image

such as: Body{background-image:url (...);}

3.background-repeat background Tiling method

such as: body{background-repeat:no-repeat;}

4.background-position Background Positioning

such as: Body{background-position:left Bottom;}

Top 2 , 3 , 4 points can be written in abbreviated mode: Body{background:url (...) no-repeat left bottom;}

The fourth day of CSS depth

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.