建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這篇文章介紹了15個(gè)重要的CSS屬性，旨在提高讀者的CSS知識(shí)和技能。文章以清晰的方式解釋了每個(gè)屬性的作用和用法，并提供了相應(yīng)的示例代碼。通過(guò)這篇文章，讀者可以了解到一些有趣且實(shí)用的CSS屬性。
:in-range 和:out-of-range 偽類(lèi)
CSS的:in-range和:out-of-range偽類(lèi)用于樣式化在指定范圍限制內(nèi)和外的輸入。
(a) :in-range
如果輸入元素的當(dāng)前值在 min 和 max 屬性的范圍之間，那么它就處于范圍內(nèi)。
這個(gè)偽類(lèi)可以方便地確定字段的當(dāng)前值是否可接受。
(b) :out-of-range
如果輸入元素的當(dāng)前值超出了min和max屬性的范圍，那么它就是超出范圍的。
它給用戶(hù)一個(gè)視覺(jué)指示，告訴他們字段值是否超出了范圍。
/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}圖片
注意：這些偽類(lèi)只適用于具有范圍限制的元素，沒(méi)有這個(gè)限制，元素就無(wú)法處于范圍內(nèi)或范圍外。
相關(guān)文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
2. grayscale() 函數(shù)
如果使用0到100%之間的值，可以創(chuàng)建不同的效果。較低的值將保留一些顏色，而較高的值將使圖像更接近黑白。
這種圖像效果可以通過(guò)CSS的濾鏡屬性實(shí)現(xiàn)。通過(guò)將圖像的filter屬性設(shè)置為grayscale(100%)，可以將圖像完全轉(zhuǎn)換為黑白。要?jiǎng)?chuàng)建不同的效果，可以嘗試不同的grayscale值，例如grayscale(50%)將使圖像呈現(xiàn)一種半色調(diào)效果。
使用CSS的圖像轉(zhuǎn)換效果，可以通過(guò)調(diào)整值來(lái)輕松地將彩色圖像轉(zhuǎn)換為黑白，并實(shí)現(xiàn)各種不同的效果。
.grayscale-image{
filter: grayscale(100%);
}圖片
3. 玻璃效果
我們可以使用幾行代碼實(shí)現(xiàn)一個(gè)玻璃效果。玻璃效果非常美麗，可以為我們的設(shè)計(jì)增添優(yōu)雅。
Glass.CSS是最受歡迎的玻璃效果生成器，我們可以免費(fèi)為項(xiàng)目創(chuàng)建CSS玻璃效果。只需要根據(jù)您的需求調(diào)整一些設(shè)置，并將CSS代碼復(fù)制粘貼到您的項(xiàng)目中即可。
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}圖片
4.使用以下CSS代碼來(lái)樣式化文本
這些是一些每個(gè)人都應(yīng)該知道的非?；镜奈谋緲邮郊记伞Ｈ欢?，還有許多其他高級(jí)選項(xiàng)可供選擇。
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}5.clamp() 函數(shù)
CSS的clamp()函數(shù)將一個(gè)值限制在兩個(gè)上下界之間。必須有一個(gè)首選值、一個(gè)最小值和一個(gè)最大值。
當(dāng)字體大小根據(jù)視口變化時(shí)，clamp() 會(huì)派上用場(chǎng)。
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}6. 居中一個(gè) div
開(kāi)發(fā)者最重要的任務(wù)之一是將一個(gè)div居中。有很多其他的選項(xiàng)可以實(shí)現(xiàn)div的居中。在這個(gè)例子中，我們使用CSS的flexbox來(lái)實(shí)現(xiàn)div的水平和垂直居中。
div{
display: flex;
justify-content: center;
align-items: center;
}7. CSS線性漸變
要?jiǎng)?chuàng)建一個(gè)漸變的CSS線性漸變，只需使用下面的CSS代碼。
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}圖片
8. CSS抖動(dòng)效果
這個(gè)“搖晃”動(dòng)畫(huà)效果會(huì)在用戶(hù)輸入無(wú)效內(nèi)容時(shí)晃動(dòng)輸入框。它簡(jiǎn)單而優(yōu)雅。例如，如果用戶(hù)在文本框中輸入數(shù)字而不是字母，輸入框?qū)?huì)搖晃。
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}圖片
9. 文本溢出
可以使用此屬性來(lái)截?cái)嘁绯龅奈谋?。它可以被裁剪并顯示為省略號(hào)(...)或自定義字符串。
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}10. 'column-count' 屬性
它指定了一個(gè)元素應(yīng)該被分成的列數(shù)。
p{
column-count: 2;
}圖片
11. CSS動(dòng)畫(huà)
動(dòng)畫(huà)逐漸改變?cè)氐臉邮健Ｖ挥性谥付P(guān)鍵幀之后才能使用。關(guān)鍵幀描述了動(dòng)畫(huà)序列中特定點(diǎn)上動(dòng)畫(huà)元素的外觀。
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}12. 陰影效果
使用CSS，我們可以為文本和元素添加效果。將屬性定義為text-shadow和box-shadow。使用text-shadow為文本添加陰影，使用box-shadow為元素添加陰影。
(i) text-shadow: It gives the text a shadow. (i) text-shadow: 它給文本添加了陰影。
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}圖片
box-shadow：用于給元素添加陰影效果。下面的示例中，實(shí)際的 div 元素是紫色的，盒子陰影是天藍(lán)色的，并且設(shè)置在右下方 10 像素處。
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}圖片
13. CSS剪裁
使用clip-path屬性，您可以?xún)H顯示元素的一部分，同時(shí)隱藏其余部分。
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}圖片
14.CSS 背景混合模式屬性
該屬性描述了背景顏色和圖像（或兩個(gè)圖像）的混合方式。一個(gè)與每個(gè)背景圖像對(duì)應(yīng)的混合模式列表組成了該值?；旌夏Ｊ街付吮尘皥D層如何混合（顏色或圖片）。
可以使用background-blend-mode屬性創(chuàng)建令人驚艷的背景。
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}圖片
15. 色相旋轉(zhuǎn)動(dòng)畫(huà)
還有其他一些選項(xiàng)可供選擇。如果你想了解更多關(guān)于這個(gè)屬性的信息，請(qǐng)?jiān)赪3Schools上查看。
可以在網(wǎng)站的主要部分和按鈕上添加色相旋轉(zhuǎn)動(dòng)畫(huà)。例如，天氣預(yù)報(bào)網(wǎng)站的主要部分將因此而變得令人驚艷。
button {
background: linear-gradient(35deg, #8C52FF, #C669FF);
animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
to {
filter: hue-rotate(85deg);
}
}圖片
標(biāo)題名稱(chēng)：每個(gè)前端開(kāi)發(fā)需要了解的15個(gè)強(qiáng)大的CSS屬性
網(wǎng)頁(yè)地址：http://www.5511xx.com/article/ccccjcc.html
