Border
The properties associated with the border are as follows.
Border-width
To set the width of the border, you can choose to include:
1) < length value;: Sets the width of the border to the length value expressed in the CSS unit of measure (such as EM, px, CM);
2) < percentage;: Sets the border width value to the percentage of the width of the border drawing area;
3) thin, medium, and thick: Set the width of the border to the preset width, the specific meaning of these three values is browser-defined, three values represent the width of the increase once, the default value of the border width is medium.
Border-style
The style used to set the drawing border, which can be any one of the following values.
1) None: No border, default value;
2) Dashed: broken-line border;
3) Dotted: dot-line border;
4) Groove: Groove-line border;
5) Inset: a border that enables the content of an element to have an inline effect;
6) Outset: The bounding rectangle that makes the element content have an outer convex effect;
7) Ridge: Ridge Line border;
8) Solid: Solid line border.
Border-color
Sets the color of the border.
Set border styles for specific edges
Top Edge
Border-top-width
Border-top-style
Border-top-color
Bottom
Border-bottom-width
Border-bottom-style
Border-bottom-color
Left
Border-left-width
Border-left-style
Border-left-color
Right
Border-right-width
Border-right-style
Border-right-color
Shorthand method
Border: < width > < STYLE > < colors >
Border-top: < width > < STYLE > < colors >
Border-bottom: < width > < STYLE > < colors >
Border-left: < width > < STYLE > < colors >
Border-right: < width > < STYLE > < colors >
Rounded border
Border-top-left-radius
Border-top-right-radius
Border-bottom-left-radius
Border-bottom-right-radius
Sets a fillet. A pair of length or percentage values, with percentages associated with the width and height of the bounding box.
Border-radius
Set Four Corners at a time. A pair or four team length or percentage value, separated by/character.
p {Border:medium solid black;} #first {border-radius:20px/15px;} #second {border-radius:50% 20px 25% 5em/25% 15px 40px 55%}
Background
background colors and images
You can set the color, image, size, and spread of the element's background as follows:
p {border:medium solid black;background-color:lightgray;background-image:url (banana.png); background-size:40px 40px ; background-repeat:repeat-x;}
Background-repeat supports the following property values:
1) Repeat-x: Tile image horizontally, image may be truncated;
2) Repeat-y: Tile image vertically, image may be truncated;
3) Repeat: Tile the image horizontally and vertically while the image may be truncated;
4) Space: Tile the image horizontally or vertically, but set a uniform spacing between the image and the image to ensure that the image is not truncated;
5) Round: Tile the image horizontally or vertically, but adjust the image size to ensure that the image is not truncated;
6) No-repeat: Tile image is forbidden.
Background-size supports the following property values:
1) contain: equal scale image, so that its width, height of the larger with the container in the horizontal or vertical overlap, the background image is always contained in the container;
2) Cover: equal scale image, so that the image covers at least the container, it is possible to go beyond the container;
3) Auto: Default value, the image is fully displayed in its own size.
Set background image position
The Background-position property sets the position of the background image.
p {border:10px double black;background-color:lightgray;background-image:url (banana.png); background-size:40px 40px; background-repeat:no-repeat;background-position:30px 10px;}
The values of the Background-position property include:
1) Top: Position the background image to the top border of the box;
2) Left: Position the background image to the right edge of the box;
3) Right: Position the background image to the left edge of the box;
4) Bottom: Position the background image to the bottom edge of the box;
5) Center: Position the background image in the middle position.
How the element background is attached
When an element has scroll bars, use the Background-attachment property to control how the background is attached. The supported property values are:
1) Fixed: Set the background to the window, that is, the content scrolling background is not moving;
2) Local: The background is attached to the content, that is, the background scrolls with the content;
3) Scroll: The background is pinned to the element and does not scroll with the content.
Start position and cropping style of the background image
The Background-origin property specifies the background color and location where the background image is applied. The supported property values are:
1) Border-box: Draw background color and background image inside the frame box;
2) Padding-box: Draw background color and background image inside the inner margin box;
3) Content-box: Draws the background color and background image inside the content box.
The Background-clip property determines which part of the background is visible, and the parts outside the clipping box are discarded and not displayed. The supported property values are the same as above.
Shorthand method
You can use the background shorthand property to set all the background values in a declaration:
Background: <background-color> <background-position> <background-size> <background-repeat> <background-orgin> <background-clip> <background-attachment> <background-image>
Shadow
Use the Box-shadow property to add a shadow effect to the element's box. The supported property values are as follows:
1) Hoffset: The horizontal offset of the shadow, is a length value, positive values are shifted to the right of the shadow, and negative values represent the left offset of the shadow;
2) Voffset: The vertical offset of the shadow, is a length value, positive values indicate that the shadow is below the element box, and a negative value indicates that the shadow is above the element box;
3) Blur: (optional) fuzzy value, is a length value, the larger the value of the box the more blurred the boundary. The default value is 0, the boundary is clear;
4) Spread: (optional) The extension radius of the shadow, is a length value, positive values represent the shadow extending to each direction of the box, and negative values indicate that the shadow shrinks in the opposite direction;
5) Color: (optional) Set the color of the shadow, if omitted, the browser will choose a color of its own;
6) Inset: (optional) Set the outer shadow to the inner shadow (embedded in the box).
You can set multiple shadows at once, using commas to separate them:
p {border:10px Double black;box-shadow:5px 4px 10px 2px Gray, 4px 4px 6px gray inset;}
Contour
Contour is optional, the use of contour is to grasp the user's attention to an element in a short time, the contour is drawn outside the box border, the biggest difference between the border and the outline is: The contour is not the page, so the application contour does not need to adjust the page layout. The properties of the contour include:
1) Outline-color: Set the color of peripheral contour;
2) Outline-offset: Length value, set the offset of contour distance element border edge;
3) Outline-style: Set contour style, same as Border-style value;
4) Outline-width: Sets the width of the contour, including: thin, medium, thick, and length values;
5) Ouline: Set all properties of the contour in one life (< color > < STYLE > < width >).
Margin of an element
The inner margin of the element
The inner margin of an element is the white space between the element's content and the bounding rectangle, with the following attributes, which are either length or percentage values:
1) Padding-top: Set the inner margin for the top edge;
2) Padding-right: Set the inner margin for the right;
3) Padding-bottom: Set the inner margin for the bottom edge;
4) Padding-left: Set the inner margin for the left side;
5) Padding: Shorthand property, set the padding for all edges at the same time.
p {border:10px solid black;background:lightgray;border-radius:1em 4em 1em 4em;padding:5px 25px 5px 40px;}
Outer margin of the element
The outer margin of an element is an empty area between the element's border and everything around it, with the following attributes, values of length or percentages:
1) Margin-top: Set the margin for the top edge;
2) Margin-right: Set the margin for the right;
3) Margin-bottom: Set the margin for the bottom edge;
4) Margin-left: Set the margin for the left side;
5) Margin: Shorthand property, which sets the margin of all edges in a declaration.
IMG {border:4px solid black;background:lightgray;padding:4px;margin:4px 20px;}
The size of the element
CSS provides properties that control the size of elements that can be used for auto, length, or percentage. Auto means that the browser sets the width and height of the element.
Set Area
The Box-sizing property specifies the area in which the dimension style is applied to the element box, with values such as:
1) Content-box: The size setting applies only to the content area;
2) Pading-box: Size setting applied to pading area;
3) Border-box: Size setting applied to border area;
4) Margin-box: The dimension setting is applied to the margin area.
Minimum and maximum dimensions
The Min-width and Max_width properties set certain limits for browser resizing.
IMG {background:lightgray;border:4px Solid black;margin:2px;box-sizing:border-box;min-width:100px;width:50%;max_ width:200px;}
Content Overflow
If the dimensions of the element are too large to be fully displayed in the element's content box, there are currently 3 properties that control how the internal overflow section is handled:
1) Overflow-x: Set the overflow mode in horizontal direction;
2) Overflow-y: Set the vertical direction overflow mode;
3) Overflow: simultaneously sets the horizontal direction and the vertical direction overflow way.
The property values supported by the 3 properties are as follows:
1) Auto: The browser handles overflow content on its own;
2) Hidden: The superfluous part is cut off directly, only displays the content inside the content box;
3) No-content: If the content can not be fully displayed, it is removed directly, most browsers do not support;
4) No-display: If the content is not fully displayed, all content is hidden, most browsers do not support;
5) Scroll: Add scroll bar for content, even if content does not overflow, can see scroll bar;
6) Visible: The default value, regardless of whether it overflows the content box, displays the element effect.
p {width:200px;height:100px;border:medium double black;} #first {Overflow:hidden;} #second {overflow:scroll;}
The visibility of the element
Use the Visibility property to control the visibility of an element, supported by the following property values:
1) Collapse: The element is not visible and does not occupy space in the page layout;
2) Hidden: The element is not visible, but occupies space in the page layout;
3) Visible: Default value, visible.
The box type of the element
The Display property provides a way to change the element box type, which changes the way elements are laid out on the page. The common values for this property are the following, excluding the properties related to elastic boxes, tables, and ruby annotations:
1) Inline: The box is displayed as a word in the line of text;
2) Block: box shown as paragraph;
3) Inline-block: The box is displayed as a text line;
4) List-item: The box is displayed as a list item;
5) Run-in: The box type depends on the surrounding elements;
6) None: The element is not visible and does not occupy space in the page layout.
Floating
The Float property sets the floating style of the element, optionally including:
1) Left: Moves the element so that its right edge is adjacent to the left edge of the containing block, or to another floating element;
2. Right: Move the element so that its right edge is adjacent to the left edge of the containing block, or another floating element;
3) None: element position fixed.
P.toggle{float:left;border:medium double black;width:40%;margin:2px;padding:2px;}
