建站
咨詢
售后
建站咨詢
新聞中心
這篇文章介紹了15個重要的CSS屬性，旨在提高讀者的CSS知識和技能。文章以清晰的方式解釋了每個屬性的作用和用法，并提供了相應(yīng)的示例代碼。通過這篇文章，讀者可以了解到一些有趣且實用的CSS屬性。
:in-range 和:out-of-range 偽類
CSS的:in-range和:out-of-range偽類用于樣式化在指定范圍限制內(nèi)和外的輸入。
(a) :in-range
如果輸入元素的當(dāng)前值在 min 和 max 屬性的范圍之間，那么它就處于范圍內(nèi)。
這個偽類可以方便地確定字段的當(dāng)前值是否可接受。
(b) :out-of-range
如果輸入元素的當(dāng)前值超出了min和max屬性的范圍，那么它就是超出范圍的。
它給用戶一個視覺指示，告訴他們字段值是否超出了范圍。
/* 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);
}圖片
注意：這些偽類只適用于具有范圍限制的元素，沒有這個限制，元素就無法處于范圍內(nèi)或范圍外。
相關(guān)文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
2. grayscale() 函數(shù)
如果使用0到100%之間的值，可以創(chuàng)建不同的效果。較低的值將保留一些顏色，而較高的值將使圖像更接近黑白。
這種圖像效果可以通過CSS的濾鏡屬性實現(xiàn)。通過將圖像的filter屬性設(shè)置為grayscale(100%)，可以將圖像完全轉(zhuǎn)換為黑白。要創(chuàng)建不同的效果，可以嘗試不同的grayscale值，例如grayscale(50%)將使圖像呈現(xiàn)一種半色調(diào)效果。
使用CSS的圖像轉(zhuǎn)換效果，可以通過調(diào)整值來輕松地將彩色圖像轉(zhuǎn)換為黑白，并實現(xiàn)各種不同的效果。
.grayscale-image{
filter: grayscale(100%);
}圖片
3. 玻璃效果
我們可以使用幾行代碼實現(xiàn)一個玻璃效果。玻璃效果非常美麗，可以為我們的設(shè)計增添優(yōu)雅。
Glass.CSS是最受歡迎的玻璃效果生成器，我們可以免費為項目創(chuàng)建CSS玻璃效果。只需要根據(jù)您的需求調(diào)整一些設(shè)置，并將CSS代碼復(fù)制粘貼到您的項目中即可。
.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代碼來樣式化文本
這些是一些每個人都應(yī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ù)將一個值限制在兩個上下界之間。必須有一個首選值、一個最小值和一個最大值。
當(dāng)字體大小根據(jù)視口變化時，clamp() 會派上用場。
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}6. 居中一個 div
開發(fā)者最重要的任務(wù)之一是將一個div居中。有很多其他的選項可以實現(xiàn)div的居中。在這個例子中，我們使用CSS的flexbox來實現(xiàn)div的水平和垂直居中。
div{
display: flex;
justify-content: center;
align-items: center;
}7. CSS線性漸變
要創(chuàng)建一個漸變的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抖動效果
這個“搖晃”動畫效果會在用戶輸入無效內(nèi)容時晃動輸入框。它簡單而優(yōu)雅。例如，如果用戶在文本框中輸入數(shù)字而不是字母，輸入框?qū)u晃。
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. 文本溢出
可以使用此屬性來截斷溢出的文本。它可以被裁剪并顯示為省略號(...)或自定義字符串。
.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' 屬性
它指定了一個元素應(yīng)該被分成的列數(shù)。
p{
column-count: 2;
}圖片
11. CSS動畫
動畫逐漸改變元素的樣式。只有在指定關(guān)鍵幀之后才能使用。關(guān)鍵幀描述了動畫序列中特定點上動畫元素的外觀。
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：用于給元素添加陰影效果。下面的示例中，實際的 div 元素是紫色的，盒子陰影是天藍色的，并且設(shè)置在右下方 10 像素處。
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}圖片
13. CSS剪裁
使用clip-path屬性，您可以僅顯示元素的一部分，同時隱藏其余部分。
.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 背景混合模式屬性
該屬性描述了背景顏色和圖像（或兩個圖像）的混合方式。一個與每個背景圖像對應(yīng)的混合模式列表組成了該值。混合模式指定了背景圖層如何混合（顏色或圖片）。
可以使用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)動畫
還有其他一些選項可供選擇。如果你想了解更多關(guān)于這個屬性的信息，請在W3Schools上查看。
可以在網(wǎng)站的主要部分和按鈕上添加色相旋轉(zhuǎn)動畫。例如，天氣預(yù)報網(wǎng)站的主要部分將因此而變得令人驚艷。
button {
background: linear-gradient(35deg, #8C52FF, #C669FF);
animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
to {
filter: hue-rotate(85deg);
}
}圖片
網(wǎng)站標(biāo)題：每個前端開發(fā)需要了解的15個強大的CSS屬性
URL網(wǎng)址：http://m.5511xx.com/article/ccccjcc.html
