It is often used in interviews. Do you understand the new features of CSS3? In response to this problem, the special arrangement is as follows~
background related
background-size : used to set the size of the background image
Optional attribute values are length, percentage, cover, contain, auto
length specifies the size of the background image with a length value. If there are two values, the first is the width and the second is the height. If it is one value, it is the width and the height is auto
Percentage indicates the percentage of the positioning area relative to the background. If there are two values, the first is the width and the second is the height. If it is one value, it is the width and the height is auto
cover means to maintain the aspect ratio of the image and scale the image to the minimum size that will completely cover the background positioning area ( the image may not be fully displayed ) .
contain means to keep the aspect ratio of the image and scale the image to the maximum size that will fit the background positioning area ( resulting in some areas without the background image ) .
auto indicates the original size of the background image (default value)
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
background-size: 40px; /* 宽度为40px 高度为auto*/
background-repeat: no-repeat;
} 
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
background-size: 70% 50%; /* 宽度为背景的70% 高度为背景的50%*/
background-repeat: no-repeat;
}
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
background-size: contain;
/* 图片等比缩放，直到背景图片的宽与容器的宽相等，或者背景图片的高与容器的高相等*/
background-repeat: no-repeat;
}
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
background-size: cover; /* 图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上*/
background-repeat: no-repeat;
}
background-origin : used to set the origin of the background image (the starting position of the background image),
Optional attribute values are padding-box | border-box | content-box
padding-box indicates displaying from the padding area (default value)
border-box means displaying from the border area
content-box means displaying from the content area
.box {
width: 200px;
height: 200px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
border: 10px dotted red;
background-repeat: no-repeat;
background-origin: padding-box;
}
background-clip is used to specify the background drawing area
Optional attribute values are border-box | padding-box | content-box | text
border-box indicates that the background is cropped outward from the border area (default value)
padding-box indicates that the background is cropped outward from the padding area
content-box indicates that the background is cropped outwards from the content area
text means to render the background only on the text ( currently use the prefix -webkit- )
.box {
width: 200px;
height: 200px;
background-color: antiquewhite;
background-image: url('./1686880776718.jpg');
padding: 20px;
border: 10px dotted red;
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: content-box;
}
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
color: transparent; /* 将字体设为透明 */
font-size: 50px;
background-image: url('./1686880776718.jpg');
padding: 20px;
border: 10px dotted red;
background-repeat: no-repeat;
background-origin: padding-box;
-webkit-background-clip: text;
}
text attribute
text-shadow: Add a shadow to the text
Optional values are: h-shadow v-shadow blur color, where h-shadow and v-shadow are required values;
.box {
width: 100px;
height: 100px;
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
white-space: used to set the text wrapping method
The optional values are: normal (default value), pre (original output), pre-wrap (on the basis of the pre effect, beyond the automatic line break), pre-line (on the basis of the pre effect, beyond the automatic line break, ignore the line break ), nowrap (do not wrap)
<div class="box">欢迎你来到学习频道</div> .box {
width: 100px;
height: 100px;
font-size: 20px;
background-color: rgb(248, 248, 60);
white-space: nowrap;
}
text-overflow: used to set the rendering mode when the text overflows
Optional values are: clip (cropping, default value), ellipsis (overflow part is replaced by ....)
To make this property effective, you need to define overflow as a non-visible value, and white-space as nowrap
.box {
width: 100px;
height: 100px;
font-size: 20px;
background-color: rgb(248, 248, 60);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
text-decoration: Text decoration conforms to attributes, including text-decoration-line, text-decoration-style and text-decoration-color
text-decoration-line indicates the position of the text decoration line, the optional values are none (default), underline (underline), overline (overline), line-through (through line); ----- required
text-decoration-style indicates the shape of the text decoration line , the optional values are solid (default), double (double line), dotted (dotted), dashed (dotted line), wavy (wavy line);
text-decoration-color indicates the color of the text decoration line
no order required
.box {
width: 100px;
height: 100px;
font-size: 20px;
text-decoration: overline;
} 
.box {
width: 100px;
height: 100px;
font-size: 20px;
text-decoration: line-through red;
}
.box {
width: 100px;
height: 100px;
font-size: 20px;
text-decoration: red underline wavy;
} 
.box {
width: 100px;
height: 100px;
font-size: 20px;
text-decoration: line-through overline red wavy;
}
text-stroke-width: Indicates the width of the text stroke;
text-stroke-color: Indicates the color of the text stroke;
text-stroke: compound attribute, set the width and color of the text stroke
Note: The text stroke attribute only supports webkit kernel browsers, and it must be prefixed with -webkit- when using it currently
.box {
width: 100px;
height: 100px;
font-size: 20px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(244, 143, 20, 0.932);
} 
gradient function
Gradients are divided into linear gradients and radial gradients
Linear-gradient There are two ways to set the gradient form (one is through the direction keyword):
linear-gradient(direction, color-stop1, color-stop2, ..., color-stopn) , the optional values of direction can be to right (from left to right), to left (from right to left), to bottom right (from the upper left corner to the lower right corner), to bottom top (from the lower left corner to the upper right corner), to top (from bottom to top), to bottom (from top to bottom), the default direction is gradient from top to bottom ;
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(red, yellow) /* 从上到下由红变黄渐变 */
}
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to right, red, yellow, blue) /* 从左到右由红变黄变蓝渐变 */
} 
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to right top,red, yellow, blue) /* 从左下角到右上角由红变黄变蓝渐变 */
}
Sets the linear gradient form (one via angle)
linear-gradient(angle, color-stop1, color-stop2, ..., color-stopn) indicates that the gradient starts from the specified angle, the default is 0
The angle is as shown in the image below, that is, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right;
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(0deg,red, yellow, blue) /* 从下到上由红变黄变蓝渐变 */
}
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg,red, yellow, blue) /* 从顺时针45度（即从左下角到右上角）由红变黄变蓝渐变 */
} 
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(-45deg,red, yellow, blue) /* 从逆时针45度（即从右下角到左上角）由红变黄变蓝渐变 */
}
You can set the position where the color starts to fade behind the color, which can be expressed in pixel values or in %
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to top,red 0px, yellow 50px, blue 100px)
/* 从下到上由红变黄变蓝渐变, 距离底部0px红色，距离底部50px 黄色，距离底部100px为蓝色 */
}
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to top,red, yellow 50%, blue 100%)
/* 从下到上由红变黄变蓝渐变, 距离底部高度的0%红色，距离底部高度的50% 黄色，距离底部高度的100%为蓝色 */
}
Gradient effects can also be set via radial-gradient:
radial - gradient(shape size at position, start-color , color-stop2, ..., color-stopn) , the center of the default gradient is center, the shape is ellipse, and the size of the gradient is the farthest-corner, indicating the farthest location ;
The optional value of shape is: circle, ellipse (ellipse)
size defines four optional values: closest-side, farthest-side, closest-corner, farthest-corner
.box {
width: 200px;
height: 100px;
background-image: radial-gradient(red, yellow, blue)
} 
.box {
width: 200px;
height: 100px;
background-image: radial-gradient(circle, red, yellow, blue)
} 
.box {
width: 200px;
height: 100px;
background-image: radial-gradient(at 100px 20px, red, yellow, blue)
/* 在宽100px 高20px的地方开始径向渐变，即为圆心 */
} 
.box {
width: 200px;
height: 100px;
background-image: radial-gradient(closest-side at 100px 20px, red, yellow, blue)
} 
Both linear and radial gradients can be set to repeat gradients:
Repeat linear gradient repeat-linear-gradient()
Repeat radial gradient repeat-radial-gradient()
Repeat means starting the gradient in an area where no gradient is occurring
.box {
width: 200px;
height: 100px;
background-image: repeating-radial-gradient(red 10px, yellow 50px, blue 100px)
}
.box {
width: 200px;
height: 100px;
background-image: repeating-linear-gradient(red 10px, yellow 50px, blue 100px)
}
.box {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 0 auto;
padding: 20px;
background-image: repeating-linear-gradient(transparent 0px, transparent 29px, gray 30px );
background-clip: content-box
}