7月安卓手機(jī)性價(jià)比榜：努比亞+紅魔兩款新機(jī)入榜
7月登場(chǎng)的新機(jī)有努比亞Z50S Pro和紅魔8S Pro，除了三星之外目前唯二的兩款搭載超頻版驍龍8Gen2處理器的產(chǎn)品，而且努比亞和紅魔也一貫有著不錯(cuò)的性價(jià)比，所以在本次的性價(jià)比榜單
CSS（層疊樣式表）是前端開發(fā)領(lǐng)域的主要技能之一，用于實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)的視覺呈現(xiàn)。雖然您可能已經(jīng)熟悉許多 CSS 屬性，但仍有一些較少討論的屬性可以增強(qiáng)您的樣式設(shè)計(jì)能力。在今天這篇文章中，我將通過代碼片段與你分享15 個(gè) CSS 屬性。
讓我們直接開始吧。
當(dāng)涉及到復(fù)選框和單選按鈕等輸入時(shí)，瀏覽器通常會(huì)引入默認(rèn)顏色，該顏色可能與您的 UI 所選配色方案不太協(xié)調(diào)。
為了保持用戶界面的一致性，您可以使用強(qiáng)調(diào)顏色屬性來更改輸入的默認(rèn)顏色。
例如：
<form> <input type="radio" id="html" /> <label for="html">HTML</label> <input type="radio" id="css" /> <label for="css">CSS</label> <input type="radio" id="js" /> <label for="js">JavaScript</label></form>CSS:
input { accent-color: green;}輸出：
有時(shí)您可能想對(duì)元素后面的區(qū)域應(yīng)用濾鏡效果（模糊效果）。為此，您可以使用background-filter屬性。
例如：
<div class="container"> <div class="box"> <p>This is an example of backdrop-filter property.</p> </div></div>CSS:
.container { display: flex; align-items: center; justify-content: center; height: 350px; width: 350px; background: url(img.webp) no-repeat center;}.box { padding: 10px; font-weight: bold; color: white; background-color: transparent; backdrop-filter: blur(10px);}輸出：
當(dāng)您使用 input 或 textarea 元素時(shí)，您可以使用 caret-color 屬性更改這些元素的文本光標(biāo)的顏色，以匹配您的網(wǎng)頁(yè)配色方案。
例如：
<input type="text" placeholder="Your Name" />CSS:
input { caret-color: red;}您可以使用圖像渲染屬性來控制縮放圖像的渲染并優(yōu)化質(zhì)量。
請(qǐng)記住，此屬性不會(huì)影響未縮放的圖像。
img { image-rendering: pixelated; /* Other values: auto, smooth, high-quality, crisp-edges, pixelated, initial, inherit */}在處理位置時(shí)，您可以使用 inset 屬性，而不是使用 top、right、bottom、left 屬性。
例如：
div { position: absolute; top: 20px; right: 25px; left: 16px; bottom: 23px;}/*You can write the above property as*/div { position: absolute; inset: 20px 25px 16px 23px;}如果你想設(shè)置元素內(nèi)容與其背景的混合，那么你可以使用 mix-blend-mode 屬性。
例如：
<div> <img src="cat.jpg" alt="cat" /></div>CSS:
div { width: 600px; height: 400px; background-color: rgb(255, 187, 0);}img { width: 300px; height: 300px; mix-blend-mode: luminosity;}輸出：
該屬性具有以下值：
normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.
您可以使用 object-fit 屬性設(shè)置圖像或視頻的大小調(diào)整行為，以使其適合其容器。
例如：
<div> <img src="cat.jpg" alt="cat" /></div>CSS:
div { width: 500px; height: 400px; border: 3px solid purple;}img { width: 500px; height: 300px; object-fit: cover; /* Other values: fill, contain, cover, scale-down, none, initial, inherit */}輸出：
object-position 屬性與 object-fit 屬性一起使用，指定圖像或視頻應(yīng)如何在其內(nèi)容框中使用 x/y 坐標(biāo)進(jìn)行定位。
例如：
<div> <img src="cat.jpg" alt="cat" /></div>CSS:
div { width: 500px; height: 400px; border: 3px solid purple;}img { width: 500px; height: 300px; object-fit: cover; object-position: bottom right;}輸出：
簡(jiǎn)單來說，這里我指定了object-position：bottom right；這意味著在調(diào)整圖像大小時(shí)它將顯示圖像的右下部分。
您可以使用輪廓偏移屬性來指定元素的輪廓和邊框之間的空間。
例如：
<div></div>CSS:
div { width: 300px; height: 300px; border: 3px solid purple; outline: 3px solid rgb(81, 131, 148); outline-offset: 10px;}輸出：
您可以使用pointer-events 屬性控制元素對(duì)指針事件的反應(yīng)。
例如：
<div> <p class="first"> Please <a >Click here</a> </p> <p class="second"> Please <a >Click here</a> </p></div>CSS:
.first { pointer-events: none; /*here all the pointer events will be set to none. So the user can't click on the link.*/}.second { pointer-events: auto;}您可以使用scroll-behavior屬性來實(shí)現(xiàn)平滑滾動(dòng)，而無需使用任何JavaScript，只需一行CSS。
例如：
html { scroll-behavior: smooth;}當(dāng)您將 text-align 的值設(shè)置為 justify 時(shí)，可以使用 text-justify 屬性來設(shè)置文本的對(duì)齊方式。
例如：
p { text-align: justify; text-justify: inter-character;/*Other values: auto, inter-word, inter-character, none, initial, inherit*/}在這里，我將值設(shè)置為字符間，這樣當(dāng)您調(diào)整窗口大小時(shí)，它會(huì)增加或減少字符之間的間距。您也可以嘗試其他值。
有時(shí)您的文本太大而無法放入其容器中。在這種情況下，要控制文本的行為，您可以使用 text-overflow 屬性。
例如：
<div> <p>This is an example of text-overflow.</p></div>CSS:
div { width: 100px; height: 40px; border: 3px solid purple;}p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}輸出：
用戶選擇屬性可用于控制用戶選擇文本的能力。
例如：
<div> <p>You can't select this text.</p></div><p>You can select this text.</p>CSS:
div {width: max-content;height: 40px;border: 3px solid purple;user-select: none;}word-break 屬性用于指定單詞在到達(dá)行尾或窗口調(diào)整大小時(shí)應(yīng)如何中斷。
例如：
p { word-break: break-all; /* Other values: normal, break-all, keep-all, break-word, initial, inherit */}這就是今天的全部?jī)?nèi)容。
本文鏈接：http://www.www897cc.com/showinfo-26-49908-0.html你應(yīng)該了解的 15 個(gè) CSS 隱藏屬性
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)