漸變文字

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

修改 media defaults

編寫css重置時(shí)，添加這些屬性以改善媒體默認(rèn)值。

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%);
}

逗號(hào)分隔的列表

li:not(:last-child)::after{
  content: ',';
}

平滑的滾動(dòng)

 html {
  scroll-behavior: smooth;
}

hyphens

hyphens 告知瀏覽器在換行時(shí)如何使用連字符連接單詞?？梢酝耆柚故褂眠B字符，也可以控制瀏覽器什么時(shí)候使用，或者讓瀏覽器決定什么時(shí)候使用。

first letter

避免不必要的 span ，并使用偽元素來設(shè)計(jì)你的內(nèi)容，同樣第一個(gè)字母的偽元素，我們還有第一行的偽元素。

h1::first-letter{
   color:#ff8A00;
}

accent-color

accent-color 屬性能夠使用自定義顏色值重新著色瀏覽器默認(rèn)樣式提供的表單控件的強(qiáng)調(diào)顏色。

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 動(dòng)畫

使用顏色旋轉(zhuǎn)濾鏡改變?cè)仡伾?/p>

button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}

clamp() 函數(shù)

clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}

selection 偽類

設(shè)置選中元素的樣式。

::selection{
  color:coral;
}

decimal leading zero

將列表樣式類型設(shè)置為十進(jìn)制前導(dǎo)零。

li{
  list-style-type:decimal-leading-zero;
}

自定義光標(biāo)

html{
  cursor:url('no.png'), auto;
}

caret-color

caret-color 屬性用來定義插入光標(biāo)(caret)的顏色，這里說的插入光標(biāo)，就是那個(gè)在網(wǎng)頁(yè)的可編輯器區(qū)域內(nèi)，用來指示用戶的輸入具體會(huì)插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西。

only-child

CSS偽類 :only-child 匹配沒有任何兄弟元素的元素。等效的選擇器還可以寫成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,當(dāng)然,前者的權(quán)重會(huì)低一點(diǎn).

使用 grid 居中元素

.parent{
  display: grid;
  place-items: center;
}

text-indent

text-indent 屬性能定義一個(gè)塊元素首行文本內(nèi)容之前的縮進(jìn)量。

p{
  text-indent:5.275rem;
}

list style type

CSS 屬性 list-style-type 可以設(shè)置列表元素的 marker(比如圓點(diǎn)、符號(hào)、或者自定義計(jì)數(shù)器樣式)。

li{
  list-style-type:'??';
}

作者：knaagar 譯者：前端小智 來源：dev 原文：https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p