css学习技巧,css怎么学习最快

首页 > 经验 > 作者:YD1662022-10-31 22:37:33

渐变文字h1{
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

css学习技巧,css怎么学习最快(1)

修改 media defaults

编写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 */ }

css学习技巧,css怎么学习最快(2)

使用 position 居中元素div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
逗号分隔的列表li:not(:last-child)::after{
content: ',';
}

css学习技巧,css怎么学习最快(3)

平滑的滚动 html {
scroll-behavior: smooth;
}

css学习技巧,css怎么学习最快(4)

首页 12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.