這些CSS提效技巧，你需要知道！
漸變文字
h1{
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
修改 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 */
}
使用 position 居中元素
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
逗號分隔的列表
li:not(:last-child)::after{
content: ',';
}
平滑的滾動
html {
scroll-behavior: smooth;
}
hyphens
hyphens 告知瀏覽器在換行時如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時候使用，或者讓瀏覽器決定什么時候使用。
first letter
避免不必要的 span ，并使用偽元素來設計你的內容，同樣第一個字母的偽元素，我們還有第一行的偽元素。
h1::first-letter{
color:#ff8A00;
}
accent-color
accent-color 屬性能夠使用自定義顏色值重新著色瀏覽器默認樣式提供的表單控件的強調顏色。
Image filled text
h1{
background-image: url('illustration.webp');
background-clip: text;
color: transparent;
}
placeholder 偽元素
使用 placeholder 偽元素來改變 placeholder 樣式：
input::placeholder{
font-size:1.5em;
letter-spacing:2px;
color:green;
text-shadow:1px 1px 1px black;
}
colors 動畫
使用顏色旋轉濾鏡改變元素顏色。
button{
animation: colors 1s linear infinite;
}
@keyframes colors {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
clamp() 函數
clamp() 函數的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數：最小值、首選值、最大值。
h1{
font-size: clamp(5.25rem,8vw,8rem);
}
selection 偽類
設置選中元素的樣式。
::selection{
color:coral;
}
decimal leading zero
將列表樣式類型設置為十進制前導零。
li{
list-style-type:decimal-leading-zero;
}
自定義光標
html{
cursor:url('no.png'), auto;
}
caret-color
caret-color 屬性用來定義插入光標(caret)的顏色，這里說的插入光標，就是那個在網頁的可編輯器區域內，用來指示用戶的輸入具體會插入到哪里的那個一閃一閃的形似豎杠 | 的東西。
only-child
CSS偽類 :only-child 匹配沒有任何兄弟元素的元素。等效的選擇器還可以寫成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,當然,前者的權重會低一點.
使用 grid 居中元素
.parent{
display: grid;
place-items: center;
}
text-indent
text-indent 屬性能定義一個塊元素首行文本內容之前的縮進量。
p{
text-indent:5.275rem;
}
list style type
CSS 屬性 list-style-type 可以設置列表元素的 marker(比如圓點、符號、或者自定義計數器樣式)。
li{
list-style-type:'??';
}
作者：knaagar 譯者：前端小智 來源：dev 原文：https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p
