******* Common CSS properties *********
match. That is, users may not see the difference between different values.
normal: Normal font. Equivalent to number 400
bold: Bold. Equivalent to number 700.
bolder: Extra bold. It is also equivalent to the role of strong and b objects
lighter: Thin body
: Use numbers to indicate the text font thickness. Value range: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
----------------- -------------------------------------------------- ----------------------------------
***** *************************************************** *************************************************** ***********
display:inline Let the elements displayed as blocks inline be displayed inline
The function of display:inline is to set the object to be displayed as an inline element. inline is the default value of the inline object
DIV1
DIV2
Here DIV1 and DIV2 occupy one line respectively, but after you add attributes to them, they change
DIV1
#DIV2
DIV1 and DIV2 are now displayed on the same line
display:block is to display the element as a block-level element.
display:inline-block renders the object as an inline object, but the content of the object is as Block object rendering. Adjacent inline objects will be rendered on the same line, allowing spaces.
----------------------------------------- -------------------------------------------------- ----------------------------------
*********** *************************************************** *************************************************** ****
【border】 Composite attribute. Sets the properties of the object's border.
If you use this composite attribute to define a single parameter, the default values of other parameters will unconditionally override the corresponding single attribute settings.
border-color: Set or retrieve the border color of the object.
If all four parameter values are provided, the four sides will be applied in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is for up and down, and the second one is for left and right.
If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.
If border-width is equal to 0 or border-style is set to none, this attribute will be ignored.
----------------------------------------- ----------------------------------------
border-image composite attribute. Sets or retrieves the object's border style to fill with an image.
Use images instead of border-style to define border styles. When border-image is none or the image is invisible, the border style effect defined by border-style will be displayed.
[ border-image-source ]: Set or retrieve whether the object's border uses an image definition style or image source path.
[ border-image-slice ]: Set or retrieve the segmentation method of the object's border background image.
[ border-image-width ]: Set or retrieve the border thickness of the object.
[ border-image-outset ]: Sets or retrieves the extension of the object’s border background image.
[ border-image-repeat ]: Set or retrieve the tiling method of the object's border image.
----------------------------------------- ----------------------------
border-radius Set or retrieve objects using rounded corners frame. Provide 2 parameters, separated by "/". Each parameter allows 1 to 4 parameter values to be set. The first parameter represents the horizontal radius, and the second parameter represents the vertical radius. If the second parameter is omitted, then The default is equal to the first parameter
Horizontal radius: If all four parameter values are provided, the top-left, top-right, and bottom-right ( The order of bottom-right) and bottom-left (bottom-left) acts on the four corners.
If only one is provided, it will be used for all four corners.
If two are provided, the first one is used for top-left (top-left) and bottom-right (bottom-right), and the second one is used for top-right (top-right) and bottom-left (bottom- left).
If three are provided, the first one is used for top-left, the second one is used for top-right, bottom-left, and the third one is used for Bottom-right.
The vertical radius also follows the above 4 points.
: Set the object’s fillet radius length with a length value. Negative values are not allowed
: Sets the object’s corner radius length as a percentage. Negative values are not allowed
---------------------------------- ------------------------------------
border- width sets or retrieves the object's border width.
If all four parameter values are provided, they will be applied to the four sides in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is for up and down, and the second one is for left and right.
If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.
If border-style is set to none, this attribute will have no effect.
: Use the length value to define the thickness of the border. Negative values are not allowed
medium: Defines the default thickness of the border.
thin: Define a border that is thinner than the default thickness.
thick: Defines a border thicker than the default thickness.
----------------------------------------- ---
border-left-style Set or retrieve the left border style of the object.
If border-width is equal to 0, this attribute will have no effect.
none: No outline. border-color and border-width will be ignored
hidden: Hide the border. IE7 and below do not yet support
dotted: dotted outline. Displayed as dashed effect under IE6
dashed: dashed outline.
solid: solid outline
double: double line outline. The sum of two single lines and their interval is equal to the specified border-width value
groove: 3D groove outline.
ridge: 3D convex groove profile.
inset: 3D concave edge contour.
outset: 3D convex edge outline.
----------------------------------------- ------------------
border-top Composite attribute. Sets the properties of the object's top border.
If you use this composite attribute to define a single parameter, the default values of other parameters will unconditionally override the corresponding single attribute settings.
[ border-top-width ]: Set or retrieve the top border width of the object.
[ border-top-style ]: Set or retrieve the top border style of the object.
[ border-top-color ]: Set or retrieve the top border color of the object.
----------------------------------------- --------------------------
box-shadow Sets or retrieves the object shadow.
You can set multiple sets of effects, and each set of parameter values is separated by commas.
none: No shadow
①: The first length value is used to set the horizontal offset value of the object’s shadow. Can be a negative value
②: The second length value is used to set the vertical offset value of the object's shadow. Can be a negative value
③: If the third length value is provided, it is used to set the shadow blur value of the object. Negative values are not allowed
④: If the fourth length value is provided, it is used to set the shadow extension value of the object. Can be negative
: Sets the color of the object's shadow.
inset: Set the shadow type of the object to inner shadow. When the value is empty, the shadow type of the object is outer shadow
--------------------- -------------------------------------------------- ------
Transparency
is written as:
{
filter: alpha(opacity=10); //针对ie
}This way it can basically be used in all browsers Achieving transparency
The above is the summary of the fourth common CSS properties. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
