渐变文字h1{
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
编写css重置时,添加这些属性以改善媒体默认值。
img, picture, video, svg {
max-width: 100%;
object-fit: contain; /* preserve a nice aspect-ratio */
}
column count
使用列属性为文本元素制作漂亮的列布局。
p{
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
使用 position 居中元素div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
逗号分隔的列表li:not(:last-child)::after{
content: ',';
}
平滑的滚动 html {
scroll-behavior: smooth;
}