Redmi Buds 4開箱簡評：才199還有降噪 可以無腦入
在上個月舉辦的Redmi Note11T Pro系列新機發布會上，除了兩款手機新品之外，Redmi還帶來了兩款TWS真無線藍牙耳機產品，Redmi Buds 4和Redmi Buds 4 Pro，此前我們在Redmi Note11T
CSS不僅能夠實現網站的外觀和布局，還能通過一系列屬性增強用戶體驗和交互性。本文將介紹10個鮮為人知但非常有趣的CSS屬性，這10 個你可能不會經常使用或從未聽說過的屬性，但是你使用了之后相信你會愛上它們的。
網頁上的滾動條都是相對普通和無趣的。然而，通過使用CSS的::-webkit-scrollbar偽元素，你可以改變滾動條的外觀，包括寬度、顏色和形狀。這讓網站看起來更專業和個性化。
圖片
我們用來::-webkit-scrollbar改變屬性。
/* 設置滾動條的寬度 */::-webkit-scrollbar { width: 10px;}/* 將滾動條軌道更改為藍色并添加圓形邊框 */::-webkit-scrollbar-track { background-color: blue; border-radius: 10px;}/* 將滾動條拇指（顯示滾動量）設為灰色并使其圓形 */::-webkit-scrollbar-thumb { background: grey; border-radius: 10px;}/* 懸停在上方時使滾動條拇指變為深灰色 */::-webkit-scrollbar-thumb:hover { background: darkgray;}
圖片
注意：這是一個非標準屬性，需要使用-webkit-前綴，否則在某些瀏覽器中可能不起作用。
光標屬性允許你自定義鼠標懸停在元素上時的光標形狀，這可以增強用戶界面的交互性。你可以根據需要選擇不同的光標樣式。
/* 類名為 'first' 的元素 */.first { cursor: not-allowed;}/* 類名為 'second' 的元素 */.second { cursor: zoom-in;}/* 類名為 'third' 的元素 */.third { cursor: crosshair;}
圖片
平滑滾動效果可以讓頁面的滾動變得更加流暢和舒適，而不是瞬間切換到不同的頁面部分。通過簡單地添加以下代碼，你就可以啟用平滑滾動行為：
html { 滾動行為：平滑；}它不是簡單地將頁面從一個部分捕捉到另一個部分，而是向上/向下滾動到該部分。
使用accent-color屬性，你可以自定義表單控件和復選框的顏色，使其與你的網站主題保持一致。這可以讓你的用戶界面更加吸引人和個性化。
圖片
查看復選框和單選按鈕的顏色如何為藍色，而不是默認（且無聊）的灰色。
input { accent-color: blue;}這不會影響文本顏色，因此你可以靈活地設置不同輸入元素的顏色以進行實驗。
在構建響應式設計時，保持元素的縱橫比可能會成為一個挑戰。這尤其重要，以確保圖像和視頻等元素不會被拉伸。通過設置寬高比屬性，你可以輕松保持縱橫比，而無需手動計算高度。
.example { /* 設置寬高比 */ aspect-ratio: 1 / 0.25; /* 設置寬度后，高度會自動調整 */ width: 200px; /* 邊框不是必需的，僅用于演示 */ border: 1px solid black;}現在我們設置了寬度，我們將自動獲得等于 125 px 的高度，以保持寬高比。這對于響應行為非常有用。
圖片
使用-webkit-box-reflect屬性，你可以在元素下方創建反射效果，類似于鏡像效果。這對于創建視覺上令人印象深刻的圖形效果非常有用。
這將在元素下方創建一個反射效果。你還可以微調反射的偏移、不透明度和顏色。
/* 類名為 'example 的元素 */ .example { /* 反射將出現在下面。其他可能的值如上 | 左| 右 */ -webkit-box-reflect: 下面；}
圖片
我們還可以稍微抵消反射。
/* 類名為 'example 的元素 */ .example { /* 反射將出現在下面。其他可能的值如上 | 左| 右 */ -webkit-box-reflect: 低于20px ; }
圖片
另外，我們希望它淡出一點。我們可以使用漸變色。
/* 類名為 'example 的元素 */ .example { /* 反射將出現在下面。其他可能的值如上 | 左| 右 */ -webkit-box-reflect：低于0px 線性漸變（到底部，rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 ,. 5 )）；}
圖片
這是大多數主要瀏覽器（Firefox 除外）支持的非標準屬性。
為了確保你的CSS屬性在各種瀏覽器中都能正常工作，你可以使用@supports規則進行檢查。這允許你根據瀏覽器的支持情況提供不同的樣式。
/* 檢查瀏覽器是否支持 display: flex */@supports (display: flex) { /* 如果支持，將顯示設置為 flex */ div { display: flex; }}雖然主要瀏覽器通常都支持大多數CSS屬性，但某些非標準屬性（如自定義滾動條和盒子反射）可能會在某些瀏覽器中不受支持。@supports使你能夠為不同情況提供備用樣式。
如果你輸入 not 關鍵字，那么如果該屬性不受支持，它將起作用。
@supports **not** (display: flex){/* If not supported *}你可以使用mask屬性將圖像蒙版應用于元素。這允許你創建復雜的遮罩效果，根據圖像的不同部分進行不同的裁剪。
.example { /* 使用URL設置蒙版 */ -webkit-mask: url(YOUR URL); mask: url(YOUR URL);}遮罩圖像中的白色部分表示遮罩，黑色部分表示要裁剪的區域。這為你提供了對元素的視覺控制。
你可以使用 CSS 向圖像添加令人驚嘆的濾鏡。濾鏡是我們在每個照片共享應用程序中都能看到的東西，現在，讓我們看看它們的實現有多么容易
img { filter: blur(5px); /* 模糊效果 */}有許多可用的過濾器可以讓你創建不同的視覺效果。你可以模糊、增亮和飽和濾鏡。你可以將圖像設為灰度、更改其不透明度、反轉顏色等等。
正常圖像（左）、模糊圖像（中）和高對比度圖像（右）
增亮圖像（左）、灰度圖像（中）和色調旋轉圖像（右）
使用backdrop-filter屬性，你可以為圖像后面的區域添加美觀的濾鏡，使背景看起來更吸引人?？梢允褂酶鞣N濾鏡屬性來調整背景效果。
<div class="image"> <div class="effect"> backdrop-filter: blur(5px); </div></div><style>.image{ background-image: url(YOUR URL); background-size: cover; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center;}.effect{ font-size: x-large; color: white; font-weight: 800; background-color: rgba(255, 255, 255, .3); backdrop-filter: blur(5px); padding: 20px;}</style>這樣可以實現視覺上吸引人的背景效果:
圖片
本文鏈接：http://www.www897cc.com/showinfo-26-16407-0.html每個前端開發都應該知道的十個強大的CSS屬性
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 如何減少自動化測試的誤差？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號