建站
咨詢
售后
建站咨詢
新聞中心
漸變文字
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)值。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)本溪免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎ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í)如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時(shí)候使用，或者讓瀏覽器決定什么時(shí)候使用。
first letter
避免不必要的 span ，并使用偽元素來(lái)設(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 偽元素來(lái)改變 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è)值超過(guò)最小值和最大值的范圍時(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 屬性用來(lái)定義插入光標(biāo)(caret)的顏色，這里說(shuō)的插入光標(biāo)，就是那個(gè)在網(wǎng)頁(yè)的可編輯器區(qū)域內(nèi)，用來(lái)指示用戶的輸入具體會(huì)插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西。
only-child
CSS偽類 :only-child 匹配沒(méi)有任何兄弟元素的元素。等效的選擇器還可以寫成 :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 譯者：前端小智 來(lái)源：dev 原文：https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p
名稱欄目：這些CSS提效技巧，你需要知道！
當(dāng)前網(wǎng)址：http://fisionsoft.com.cn/article/dpigcgc.html
