頁(yè)面制作的15個(gè)CSS技巧

時(shí)間：2023-10-02 15:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-02 15:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

頁(yè)面制作的15個(gè)CSS技巧：本文跟大家分享一些在技術(shù)文檔中很少提到的CSS屬性和值，但是，在我看來(lái)，對(duì)于提高web界面開發(fā)的速度和質(zhì)量特別有幫助。文章中涉及的很多特性都是實(shí)驗(yàn)性質(zhì)的，現(xiàn)代瀏覽器基本支持了大部分了，如果在使用下面提到的屬性的時(shí)候又需要兼容主流瀏覽器的時(shí)候，可以先查看一下Can I use。

1. flex + gap

在談?wù)摰?Flexbox的時(shí)候，不得不提 gap 屬性，是用來(lái)設(shè)置網(wǎng)格行與列之間的間隙（gutters），該屬性是row-gap 和 column-gap 的簡(jiǎn)寫形式。

.flex-gap { display: flex; flex-wrap: wrap; gap: 1em;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/xxdKpPJ

2. grid + place-items

它允許相關(guān)的布局（如 grid 或 Flexbox）中可以同時(shí)沿著塊級(jí)和內(nèi)聯(lián)方向?qū)R元素，可以僅用兩行代碼實(shí)現(xiàn)水平和垂直對(duì)齊項(xiàng)目。

place-items 是 justify-items 和 align-items 的簡(jiǎn)寫屬性，可以一次應(yīng)用于一個(gè)或多個(gè)（子）單元格。

.grid-wrapper { display: grid; height: 98vh; background-color: #efefef;}.center-block { display: grid; place-items: center;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/MWmgrvo

3. flex + margin

水平和垂直對(duì)其項(xiàng)目的另一種實(shí)現(xiàn)方式，使用組合 display:flex 和 margin:auto 的組合。

.grid-wrapper { display: flex; height: 98vh; background-color: #efefef;}.center-block { margin: auto;}使用下面的代碼也是可以實(shí)現(xiàn)同樣的效果：

.grid-wrapper { display: flex; height: 98vh; background-color: #efefef; justify-content: center; align-items: center;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/yLbBpxz

4. columns

這個(gè)屬性允許將文本拆分為列，column-count 屬性指定列數(shù)，column-gap 設(shè)置列間間隙，column-rule 設(shè)置列間垂直線的樣式。而 columns 是 column-count 和 column-width 的簡(jiǎn)寫屬性。

樣式代碼如下：

p { margin: 1em; column-count: 4; column-gap: 2em; column-rule: 1px dotted #506ee4; line-height: 1.6; text-align: justify;}html 代碼：

<p>卡耐基對(duì)微笑有這樣的描述：“它在家中產(chǎn)生，他不能買，不能求，不能借，不能偷，因?yàn)樵谌藗兊玫剿埃瑢?duì)誰(shuí)都是無(wú)用的東西，他給予后人之后，會(huì)使你得到別人的好感，它是疲倦者的休息，希望的陽(yáng)光，悲哀者的力量，又是大自然免費(fèi)賦予人們的一種解除苦難的良藥。” </p>效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/XWRrVxq

5. inline-flex

此屬性允許創(chuàng)建具有 Flexbox 功能的內(nèi)聯(lián)元素，過(guò)多的描述不如實(shí)例：

HTML 結(jié)構(gòu)代碼如下：

<span> </span><span> </span><span> </span><span> </span>主要樣式表代碼：

span { width: 2.5em; height: 2.5em; /* --inline-flex設(shè)置開始-- */ display: inline-flex; justify-content: center; align-items: center; /* --inline-flex設(shè)置結(jié)束-- */ background: #506ee4; box-shadow: 0 7px 14px 0 rgb(0 4 68 / 50%); font-size: 1.2rem; outline: 1px dashed #fff; outline-offset: -5px;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/yLbBpWp

6. filter

filter 屬性允許對(duì)元素應(yīng)用一些視覺(jué)效果，渲染一些復(fù)雜的圖形效果，如模糊、顏色偏移、濾鏡等，主要應(yīng)用于 svg 濾鏡元素。

下面列出了 filter 可用的屬性值及功能說(shuō)明：

• url()：獲取指向SVG過(guò)濾器的URI，例如：filter: url("media.svg");
• blur()：將高斯模糊應(yīng)用于輸入圖像，只接受具體的長(zhǎng)度值，不接受百分比值，默認(rèn)為0。例如：filter: blur(1px);
• brightness()：將線性乘法器應(yīng)用于輸入圖像，使其看起來(lái)或多或少地變得明亮。值為 0％ 將創(chuàng)建全黑圖像，值為 100％ 保持不變，例如：filter: brightness(50%);
• contrast()：調(diào)整輸入圖像的對(duì)比度，值是 0% 創(chuàng)建全黑圖像，值是 100%，圖像不變，值可以超過(guò) 100%。例如：filter: contrast(200%);
• drop-shadow()：對(duì)輸入圖像應(yīng)用陰影效果，陰影可以設(shè)置模糊度的，以特定顏色畫出的遮罩圖的偏移版本，最終合成在圖像下方。例如：filter: drop-shadow(16px 16px 20px #ff0000);
• grayscale()：將改變輸入圖像灰度，amount 的值定義了轉(zhuǎn)換的比例，值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無(wú)變化，值在 0% - 100% 之間，則是效果的線性乘數(shù)。例如：filter: grayscale(100%);
• hue-rotate()：在輸入圖像上應(yīng)用色相旋轉(zhuǎn)，例如：filter: hue-rotate(90deg);
• invert()：反轉(zhuǎn)輸入圖像
• opacity()：轉(zhuǎn)化圖像的透明度
• saturate()：轉(zhuǎn)換圖像飽和度
• sepia()：將圖像轉(zhuǎn)換為深褐色

是快速的實(shí)現(xiàn)網(wǎng)站主題顏色切換的方案之一，下面代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)答的切換主題的效果，點(diǎn)擊復(fù)選框即可看到。

主要CSS代碼如下：

.theme:checked + .typography { filter: invert();}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/wvdwyWd

推薦一個(gè)庫(kù) CSSgram ，可以用于使用 CSS 過(guò)濾器和混合模式重新創(chuàng)建 Instagram 過(guò)濾器。

7. drop-shadow

filter 的 drop-shadow() 屬性與 box-shadow 屬性不同，它在應(yīng)用效果方面類似，允許向圖像本身添加陰影，而不是給它所在的框添加陰影。

如下效果：

第一個(gè)效果box-shadow: 0 7px 14px 0 #ff0000; ，第二個(gè)效果是filter: drop-shadow(0 7px 14px #ff0000);

在線預(yù)覽：https://codepen.io/quintiontang/pen/JjNPprP

8. object-fit

object-fit 屬性控制被替換元素（如 img 和 video）的長(zhǎng)寬比（如果它們有寬度或高度）以及縮放過(guò)程。

例如，scale-down 值可以保持圖像的寬高比，而不用考慮框的大?。?br>
<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-256.png" alt="javascript" /><img src="https://pics.freeicons.io/uploads/icons/png/14016183671580802975-256.png" alt="typescript" /><img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-256.png" alt="vue" />css 代碼：

img { width: 100px; height: 100px; padding:2px; /* --開始o(jì)bject-fit屬性設(shè)置-- */ object-fit: scale-down; /* --結(jié)束object-fit屬性設(shè)置-- */ border: 1px dashed #506ee4; border-radius: 20px;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/eYWOVKX

9. cursor

你是否覺(jué)得瀏覽器提供的鼠標(biāo)圖形不好看，那么可以使用這個(gè)屬性設(shè)置你想要的性質(zhì)，可以是圖片和svg。

<div class="image">image</div><div class="svg">svg</div>css代碼如下：

.image { cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),auto;}.svg { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'> </text></svg>"),auto;}

10. caret-color

caret-color 屬性用來(lái)定義插入光標(biāo)（caret）的顏色，插入光標(biāo)，就是在可編輯器區(qū)域內(nèi)，用來(lái)指示用戶的輸入的那個(gè)一閃一閃的形似豎杠|的東西。

在線預(yù)覽：https://codepen.io/quintiontang/pen/MWmgBgd

11. background-clip

background-clip 屬性定義背景顏色或背景圖像應(yīng)該超出元素的內(nèi)邊距的程度，text 是這個(gè)屬性是個(gè)有意思的值，讓文字變得生動(dòng)。

html 代碼如下：

<p>DevPoint</p>css 代碼如下：

p { font-family: "Bungee", cursive; font-size: 8rem; color: transparent; font-weight：bolder; /* --開始background-clip設(shè)置-- */ background-image: url("https://crayon.devpoint.cn/assets/images/bgs/main.jpg"); -webkit-background-clip: text; background-clip: text; /* --結(jié)束background-clip設(shè)置-- */ background-size: cover; background-position: center;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/bGWbjwm

12. background-repeat

background-repeat 屬性設(shè)置圖像填充背景的順序，round 值將圖像均勻地分布在容器的整個(gè)寬度上，而space值則在圖像之間添加少量填充：

.repeat div { background-repeat: repeat;}.round div { background-repeat: round;}.space div { background-repeat: space;}效果如下：

在線預(yù)覽：https://codepen.io/quintiontang/pen/jOmNpGj

13. ::marker

通常使用 list-style: none 刪除列表標(biāo)記，并使用 ::before 或 ::after 偽元素添加自定義的標(biāo)記?，F(xiàn)在有一種更簡(jiǎn)單的方法可以做到這一點(diǎn)就是使用 ::marker 偽元素。

li::marker { content: "? "; color: green;}li:last-child::marker { content: "? "; color: red;}在線預(yù)覽：https://codepen.io/quintiontang/pen/gOWYjzd

14. :target

:target 偽類可以在無(wú)需 JavaScript 的情況下創(chuàng)建模態(tài)窗口：

.modal { opacity: 0; visibility: hidden; transition: 0.3s ease-in;}.modal:target { opacity: 1; visibility: visible;}在線預(yù)覽：https://codepen.io/quintiontang/pen/poPzZOv

15. ::selection

::selection 偽元素用來(lái)設(shè)置文本選擇的樣式。

p::selection { background-color: #ff0000; color: #fff;}在線預(yù)覽：https://codepen.io/quintiontang/pen/YzVKjdL

總結(jié)

CSS是前端工程師的基本功，如何設(shè)計(jì)制作出一個(gè)交互性強(qiáng)的效果，需要一定的空間思維。對(duì)于初學(xué)者而言，個(gè)人覺(jué)得最好的方式就是模仿，找一些交互不錯(cuò)的網(wǎng)站去模仿。現(xiàn)在瀏覽器基本都支持最新的CSS，未來(lái)WEB將會(huì)出現(xiàn)令人驚嘆的效果。