Border style, paragraph style, background style

Border Style:

1. Border-width

Border Width:

border-width:5px; ｝

/*border-top-width      Setting the top border width
  Border-bottom-width    Setting the bottom border width
   　  Set left Border width
  Border-right-width     Set the right border width */

2. Border-color

Border color:

border-color:red; ｝

/*border-top- Color       set top border  colors

  border-bottom- color   Set the bottom border  

  border-left- color   Set the left border  　  

border-right-  Color Set the right      Border  * /

3. Border-style

Border Line:

Border-style:solid; ｝

Border line property values are:

None (no contour)

Hidden (hides the border. IE7 and below are not yet supported )

Dotted (dot contour). IE6 shown as dashed effect )

Dashed (dashed outline)

Solid (solid line contour)

Double (two-line outline)

Groove (3D Groove Profile)

Ridge (3D convex groove profile)

Inset (3D concave edge profile)

Outset (3D convex edge profile)

4. Border

Border:

You can border-width, Border-style, Border-color abbreviations with the above three styles:

div {    width:200px;     height:200px;     border:1px solid #FF0000;}

5. Border-radius

Rounded Corners:

/*all corners use rounded corners with a radius of 10px*/div{Border-radius:10px;} /*Four RADIUS values are the upper-left, upper-right, lower-right, and lower-left corner, clockwise*/div{Border-radius:5px 4px 3px 2px;} /*You can also set the vertical and horizontal radii of each corner separately, separated by a slash, the first parameter represents the horizontal radius at which the upper-left corner starts clockwise, and the second parameter represents the vertical radius at the beginning of the upper-left corner.*/div{Border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}/*round*/div{Border-radius: -% }

/* Semi-circle * *

div{
width:200px;
height:100px;
Border-style:solid;
border-color:red;
border-width:5px;
border-radius:100px 100px 0 0;
}

The semicircular effect is as follows:

6. Border-image

Border Picture:

div {border:10px solid gray; Border-image:url (1/10px;}

/*

< ' Border-image-source ';: Sets or retrieves whether the border of an object defines the style or image source path with an image.
< ' border-image-slice ';: Sets or retrieves the way the object's border background is split.
< ' border-image-width ';: Sets or retrieves the border thickness of an object.
< ' border-image-outset ';: Sets or retrieves an extension of the object's border background image.
< ' border-image-repeat ';: Sets or retrieves the way the object's border image is tiled.

*/

7. Box-shadow(Box Shadow)

How to use:

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

. 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); }/*external shadow blur extension effect*/. inset {Box-shadow:2px 2px 5px 1px rgba (0,0,0, .6) inset; }/*Inner Shadow Effect*/

Paragraph style:

1. Line-height(Row height)

p {line-height:25px;} p {line-height:%}

2. Text-indent(paragraph indent)

/* indent 2 characters in the first line */

3. Text-align:

p {text-align:right;} p {text-align:center;}

The property values are:

Left (Content-aligned)
Center (Content Center aligned)

Right (content is justified)

Justify (the content is justified, but for the line that forces the break (the line that is interrupted) and the last line (which includes only one line of text, because it is both the first and last line) does not work. ）

4. Letter-spacing(text spacing)

p {letter-spacing:5px;} /* The distance between each text and the text is 5px*/

5. Text-overflow(text overflow)

Text-overflow is only used to illustrate the text overflow in what way display, to achieve overflow when the effect of ellipsis, you must also define the force text in a row (white-space:nowrap) and overflow content is hidden (Overflow:hidden), This is the only way to achieve an overflow text display ellipsis effect.

div,input{    Overflow:hidden;     /* condition 1: Out -of-section hidden */     White-space:nowrap; /* Condition 2: Force all text to appear in the same row */     text-overflow:ellipsis; /* Out-of- section display ... */}

6. Word-wrap (paragraph wrapping)

Normal allows the content to open or overflow the specified container boundary.

Break-word content will wrap within the boundary. If necessary, word breaks are allowed inside words.

p {                wordbreak-word;            } 

Background style:

1. Background-color (background color)

Body {background-color: #CCCCCC;}

2. Rgba

RGB is a color standard that is composed of red (R), Green (G), Blue (B) variations, and overlapping to obtain a wide variety of colors. RGBA Adds a parameter that controls alpha transparency on the basis of RGB.

Grammar:

Color:rgba (r,g,b,a) above R, G, B three parameters, positive integer value range is: 0-255. The value of the percentage value range is: 0%-100%. Values that are out of range will be up to their nearest value limit. Not all browsers support the use of percent values. A is a transparency parameter, and the value is between 0~1 and not negative.

Border-color:rgba (25500 ,.  7);    /* . 7 is the meaning of alpha transparency of 70% */ background  -  -  ,. 5 ); border-color:rgba (25500 ,.  7);

3. Linear-gradient (gradient color)

CSS3 Gradient are divided into linear gradients (linear) and radial gradients (radial).

Because different rendering engines implement the syntax of gradients, we only analyze the use of the standard syntax for linear gradients, and the rest of us can read the relevant data.

The ie10+, firefox19.0+, chrome26.0+ and opera12.1+ have been supported by browsers.

(%,blue);

4. Background-image (background image)

Body {background-image:url (images/bg.gif);}

5. Background-repeat (background tiling mode)

body {background-repeat:no-repeat;} / * Background image Uneven *   /  

Property value:

Repeat-x: Background image is tiled horizontally

Repeat-y: Background image is tiled vertically

Repeat: Background image is tiled horizontally and vertically

No-repeat: Uneven background image

Round: The background image is automatically scaled until it fits and fills the entire container. (CSS3)

Space: The background image is tiled with the same spacing and fills the entire container or direction. (CSS3)

6. Background-position (background positioning)

Body {background-position:left bottom;} Body {background-position:

7. Background

Background style abbreviations

. Nav {         background:#redurl (images/icon.jpg)  no-repeat Left 0px;
　　　　　　　　/* The background color is red , the path of the background image to locate , the background image is uneven , the position is on the left and the top is 0px. */
}

Border style, paragraph style, background style