Border shadow, outline, column sharding, and border shadow profile column sharding
This article describes how to add shadow effects to <div> labels and images. You can also add contour effects to some elements on the webpage.
The box-shadow attribute is used to implement layer shadow effects for objects.
Box-shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color;
Projection MethodThis parameter is an optional value. If no value is set, the default projection method is the outer shadow. If the unique value "inset" is used, the outer shadow is changed to the inner shadow.
X axis offsetThe horizontal offset of the Shadow. If the value is positive, the shadow is on the right of the object. If the value is negative, the shadow is on the left of the object.
Y axis offsetThe vertical offset of the Shadow. If the value is positive, the shadow is at the bottom of the object. If the value is negative, the shadow is at the top of the object.
Shadow blur radiusThis parameter is an optional value, but its value can only be a positive number. If the value is 0, it indicates that the shadow has no blur effect. The greater the value, the blurrier the edge of the shadow.
Radius of shadow ExpansionOptional value. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced.
Shadow colorOptional value. If no color is set, the browser will take the default color, but the default color of each browser is different, especially in the Safari and Chrome browsers under the WebKit kernel will be colorless, that is, transparent, we recommend that you do not omit this parameter.
The outline attribute (outline) is a line drawn around the element. It is located at the periphery of the border edge and can highlight the element.
Outline: <color> <style> <width> <offset> inherit
ColorBorder color
StyleSpecify the outline border Profile
WidthSpecify the width of the contour border
OffsetNumeric value at the offset position of the contour border
InheritDefault
The outline-width attribute sets the width of the entire outline of an element. This width takes effect only when the outline style is not none. If the style is none, the width
Actually, it will be reset to 0. The negative length value cannot be set.
Outline-width: thin medium thick <length>
ThinDefine a contour
MediumDefault value. Define a moderate profile.
ThickDefine rough outlines
<Length>Defines the width of a contour.
The outline-style attribute is used to set the style of the entire outline of an element.
Outline-style: none dotted dashed solid double groove ridge inset outset
NoneDefault value. Define a non-Profile
DottedDefine a point-like outline
DashedDefine a dotted line outline
SolidDefine a solid line profile
DoubleDefines a dual-line contour. The width of the double line is equivalent to the value of outline-width.
GrooveDefines a 3D Concave edge profile. This effect depends on the value of outline-color.
RidgeDefines a 3D convex groove profile. This effect depends on the value of outline-color.
InsetDefines a 3D Concave edge profile. This effect depends on the value of outline-color.
OutsetDefines a 3D convex and edges. This effect depends on the value of outline-color.
The outline-offset attribute can make the outline deviate from the container edge, that is, the distance between the outer border and the container edge can be adjusted.
Outline-offset: <length> inherit
<Length>Defines the value of the contour distance from the container.
The outline-color attribute sets the color of the visible part of an element's entire contour. In this case, the outline style cannot be none; otherwise, the outline will not appear.
Columns: Number of columns in width
Column-width defines the width of each column
Column-width: [<length> auto]
The auto property value takes the computer value, while the <length> property value indicates the length value composed of floating-point numbers and unit identifiers.
The column-span definition element can be located and displayed on the column.
Column-span: 1 | all
"Column-span: 1;" indicates to display only in this column; "column-span: all;" indicates to span all columns and locate them on the Z axis of the column.
The column-rule attribute defines the width, style, and color of the border between each column.
Column-rule: <length> <style> <color>
The column-gap attribute defines the spacing between two columns.
Column-gap: normal <length>
The value of the normal parameter is 1 em, and the value of the <length> parameter indicates the length value composed of floating point numbers and unit identifiers. It cannot be negative.
Whether the column height of column-fill attribute definition is uniform
Column-fill: auto balance
The auto parameter value defines that the height of each column automatically changes with the content. The height of each column of the balance parameter value is consistent according to the height of the column with the most content.
The column-count attribute is used to define the number of columns.
Column-count: auto integer
Colunm-break-after defines whether a row is broken after an element.
Colunm-break-after: auto <always> <avoid>
The auto parameter specifies the color.
