CSS3: border, background, and size of an element
Border and border attributes are as follows. Border-width is used to set the border width. The options include:
1) <length value>: Set the Border width to the length value expressed in CSS measurement units (such as em, px, and cm;
2) <percentage>: Set the Border width value to the percentage of the border painting area width;
3) thin, medium, and thick: Set the Border width to the preset width. The specific meaning of these three values is defined by the browser. The three values indicate an increase in the width, the default value of Border width is medium. Border-style is used to set the style used to draw borders. It can be any of the following values.
1) none: no border, default value;
2) dashed: Broken Line border;
3) dotted: dot-line border;
4) groove: groove border;
5) inset: a border with embedded effects on the element content;
6) outset: border that gives the element content a convex effect;
7) ridge: Spine border;
8) solid: solid border. Border-color sets the border color. Set the top edge of the border style for a specific edge
Border-top-width
Border-top-style
Border-top-color
Bottom edge
Border-bottom-width
Border-bottom-style
Border-bottom-color
Left
Border-left-width
Border-left-style
Border-left-color
Right side
Border-right-width
Border-right-style
Border-right-color: <width> <style> <color>
Border-top: <width> <style> <color>
Border-bottom: <width> <style> <color>
Border-left: <width> <style> <color>
Border-right: <width> <style> <color> border-top-left-radius
Border-top-right-radius
Border-bottom-left-radius
Border-bottom-right-radius
Set a rounded corner. A pair of length values or percentages. Percentages are related to the width and height of the border box.
Border-radius
Set four corners at a time. The length value or percentage value of one or four teams, separated by/characters.
p {border: medium solid black;}#first {border-radius: 20px / 15px;}#second {border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%}The background color and image can be used to set the color, image, size, and paving mode for the background of an element, 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 attribute values:
1) repeat-x: horizontal tiled image, which may be truncated;
2) repeat-y: The image is tiled vertically and may be truncated;
3) repeat: horizontal and vertical tiled images may be truncated;
4) space: The image is tiled horizontally or vertically, but the spacing between the image and the image is set to ensure that the image is not truncated;
5) round: The image is tiled horizontally or vertically, but the image size is adjusted to ensure that the image is not truncated;
6) no-repeat: Disable tiled images. Background-size supports the following attribute values:
1) contain: scales the image proportionally, so that the image with larger width and height overlaps with the horizontal or vertical direction of the container, and the background image is always included in the container;
2) cover: proportional scaling of the image to make the image cover at least the container, which may exceed the container;
3) auto: default value. The image is displayed in full size. Set the background image position background-position attribute to set the background image position.
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 value of the background-position attribute includes:
1) top: place the background image to the border at the top of the box;
2) left: positions the background image to the left boundary of the box;
3) right: positions the background image to the right border of the box;
4) bottom: locates the background image at the bottom of the box;
5) center: locates the background image in the center. When an element has a scroll bar, you can use the background-attachment attribute to control the attachment mode of the background. Supported attribute values include:
1) fixed: the background is fixed to the window, that is, the background does not move when the content is rolled;
2) local: the background is attached to the content, that is, the background is rolled along with the content;
3) scroll: the background is fixed to the element and will not scroll along with the content. The start position of the background image and the background-origin attribute of the cropping style specify the background color and the position where the background image is applied. Supported attribute values include:
1) border-box: draws the background color and background image inside the border box;
2) padding-box: draws the background color and background image inside the padding box;
3) content-box: draws the background color and background image inside the content box. The background-clip attribute determines which part of the background is visible. All parts outside the cropping box are discarded and not displayed. The supported attribute values are the same as the preceding values. You can use the background attribute to set all background values in a declaration:
Background: The box-shadow attribute can be used to add a shadow effect to the box of an element. The supported attribute values are as follows:
1) hoffset: horizontal offset of the shadow. It is a length value. positive values indicate the offset to the right of the shadow, and negative values indicate the offset from the shadow to the left;
2) voffset: the vertical offset of the shadow. It is a length value. A positive value indicates that the shadow is under the element box, and a negative value indicates that the shadow is above the element box;
3) blur: (optional) fuzzy value. It is a length value. The greater the value, the blurrier the boundary of the box. The default value is 0, and the boundary is clear;
4) spread: (optional) radius of the shadow. It is a length value. A positive value indicates that the shadow is extended to all directions of the box. A negative value indicates that the shadow is reduced along the opposite direction;
5) color: (optional) set the shadow color. If omitted, the browser selects a color;
6) inset: (optional) set the external shadow to an internal shadow (embedded in the box ).
You can set multiple shadows at a time, separated by commas:
p {border: 10px double black;box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;}Contour outlines are optional. The purpose of a contour is to capture the user's attention to an element in a short period of time. The contour is drawn outside the border of the box. The biggest difference between the border and the outline is: the outline does not belong to the page. Therefore, you do not need to adjust the page layout when applying the outline. Attributes of a profile include:
1) outline-color: Set the color of the peripheral contour;
2) outline-offset: length value, which is used to set the offset between the contour and the edge of the element border;
3) outline-style: Set the outline style, which is the same as the value of border-style;
4) outline-width: Set the width of the contour, including thin, medium, thick, and length value;
5) ouline: Set all attributes of a contour in a lifecycle (<color> <style> <width> ). The padding of an element is the gap between the content of the element and the border. The padding has the following attributes:
1) padding-top: Set the padding for the top side;
2) padding-right: Set the padding for the right side;
3) padding-bottom: Set the padding for the bottom side;
4) padding-left: Set the padding on the left;
5) padding: Short for Attribute and set the padding of all edges.
p {border: 10px solid black;background: lightgray;border-radius: 1em 4em 1em 4em;padding: 5px 25px 5px 40px;}The outer margin of an element is the blank area between the element border and all things around it on the page. The outer margin has the following attributes, and the values are length values or percentages:
1) margin-top: Set the margin for the top side;
2) margin-right: Set the margin on the right;
3) margin-bottom: Set the margin for the bottom side;
4) margin-left: Set the margin on the left;
5) margin: Short for Attribute. Set the margin of all edges in a declaration.
img {border: 4px solid black;background: lightgray;padding: 4px;margin: 4px 20px;}The element size CSS provides attributes that control the element size. These attributes can use auto, length value, or percentage. Auto allows the browser to set the width and height of the element. Set the Area box-sizing attribute to specify the specific area where the size style is applied to the element box. The values include:
1) content-box: the size setting is only applied to the content area;
2) pading-box: Apply the size settings to the pading area;
3) border-box: Apply the size settings to the border area;
4) margin-box: Apply the dimension settings to the margin area. The min-width and max_width attributes limit the size of the browser.
img {background: lightgray;border: 4px solid black;margin: 2px;box-sizing: border-box;min-width: 100px;width: 50%;max_width: 200px;}Content overflow cannot be fully displayed in the element content box if the element size is too large. Currently, there are three attributes used to control the internal overflow processing method:
1) overflow-x: sets the horizontal overflow mode;
2) overflow-y: sets the vertical overflow mode;
3) overflow: sets the horizontal and vertical overflow modes.
The three attributes support the following attribute values:
1) auto: the browser handles overflow content by itself;
2) hidden: the excess parts are directly cut off and only the content in the content box is displayed;
3) no-content: If the content cannot be fully displayed, it will be removed directly, which is not supported by most browsers;
4) no-display: If the content cannot be fully displayed, all content is hidden, which is not supported by most browsers;
5) scroll: Add a scroll bar to the content, and you can see the scroll bar even if the content does not overflow;
6) visible: default value. Whether or not the content box overflows, the element effect is displayed.
p {width: 200px;height: 100px;border: medium double black;}#first {overflow: hidden;}#second {overflow: scroll;}The visibility of elements uses the visibility attribute to control the visibility of elements. The supported attribute values are as follows:
1) collapse: the element is invisible and does not occupy space in the page layout;
2) hidden: the element is invisible, but occupies space in the page layout;
3) visible: The default value is visible. The display attribute of the element's box type provides a way to change the element's box type, which changes the layout of elements on the page. Common Values of this attribute are as follows, excluding attributes related to elastic boxes, tables, and ruby Annotations:
1) inline: the box is displayed as a word in the text line;
2) block: the box is displayed as a 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 invisible and does not occupy space in the page layout. The floating float attribute sets the floating style of an element. The options include:
1) left: Move the element to the left boundary of the contained block or the right boundary of another floating element;
2) right: Move the element to the right boundary of the contained block or the left boundary of another floating element;
3) none: fixed element position.
p.toggle{float: left;border: medium double black;width: 40%;margin: 2px;padding: 2px;}
