前端實用的CSS技巧

、首字母大寫

::first-letter 偽類選擇器用來指定元素第一個字母的樣式。

2、透明圖片陰影

相信你一定用過box-shadow屬性給盒子設置陰影吧，但是當你想要給透明圖片添加陰影的時候，卻看起來像加了個邊框！這時候神奇的drop-shadow就派上用場了。

drop-shadow 的工作方式是，其遵循給給定圖片的 Alpha 通道。因此陰影是基于圖片的內部形狀，而不是顯示在圖片外面。

3、鏤空文字

-webkit-text-stroke: 1px #1e80ff;

注意：鏤空文字屬性ie瀏覽器不兼容

4、背景文字

利用background-clip: text;規定背景的繪制區域，再把文字顏色設置為透明實現。

5、網頁灰度效果

grayscale(amount)函數將改變輸入圖像灰度。amount 的值定義了灰度轉換的比例。值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。若未設置值，默認值是 0。（如下鼠標懸浮體驗效果）

6、flex布局最后一行左對齊

方法1：使用js補齊元素，例如，每行展示3個元素，現在一共有5個元素，那么我們就可以在最后補一個同寬度的透明元素。

方法2：justify-content設置為space-between實現兩端對齊效果，最后一行再特殊處理：思路為選中最后一個元素，設置其右邊距，擠到只能容納最后一行元素的寬度。

方法3：justify-content設置為flex-start,先將全部元素左對齊，然后計算出每個元素的間距，通過gap設置元素間距(如果行列間距不同，可以用column-gap設置列間距，row-gap設置行間距)，偽裝實現兩端對齊的效果。

7、毛玻璃背景效果

使用backdrop-filter與filter都可以寫出高斯模糊的效果，但是兩者使用起來還是有區別的，而且使用的目標也不同。

區別：

backdrop-filter：使背景模糊，不會影響到背景下面的圖片

filter：通常是定義 img的可視效果，修改圖片的模糊效果，值越大越模糊

8、inline元素間的空白間隙

行內元素排列的時候，明明沒有邊框，也沒有間距，但就是有空隙。

其實間隙是由換行或者回車導致的，你可以將標簽代碼都寫同一行即可解決。但是這樣有點呆，我們可以通過設置父元素的font-size為0將空隙縮小到0。

9、文字溢出省略

單行文本：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行文本：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;（多少行省略）

overflow: hidden;

注意：ie不兼容，可用min-height：省略的行數*行高來解決；

10、列表除最后一個元素外，其他元素統一樣式

一般這種情況，我們可以先全部統一樣式，然后再單獨設置最后一個元素樣式覆蓋公共樣式。

也可以用 :not 選擇器直接設置除了最后一個元素的樣式。

:not(selector) 選擇器匹配每個元素是不是指定的元素/選擇器。

11、隱藏滾動條

.element::-webkit-scrollbar {

display: none;

}

12、禁止用戶選擇

div {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

13、暫停動畫

animation-play-state可以控制動畫狀態

次畫的是QQ瀏覽器圖標，比較復雜，各種高光漸變色內陰影等。其實，CSS畫畫就和用PS畫畫一樣，從最底層，一層一層往上畫，最后合成一張圖：

CSS畫QQ瀏覽器圖標

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

html,body{
 height:100%;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eee;
}

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

.logo{
 width: 300px;
 height:300px;
 background: linear-gradient(to right bottom,#66adff,#1a6adb);
 border-radius: 999px;
 position: relative;
}
<div class="logo"></div>

效果圖：

3、給 logo 的 after 上個灰色，做出鏤空效果：

.logo:after{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background-color: #eee;
 border-radius: 999px;
 z-index: 15;
 left: 50%;
 top:50%;
 margin-left: -75px;
 margin-top:-75px;
}

效果圖：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

.logo:before{
 position: absolute;
 width: 166px;
 height: 166px;
 content:'';
 background: linear-gradient(to right bottom,#1a6adb,#66adff);
 border-radius: 999px;
 z-index: 9;
 left: 50%;
 top:50%;
 margin-left: -83px;
 margin-top:-83px;
}

效果圖：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

.before-high-light{
 position: absolute;
 width: 168px;
 height: 168px;
 content:'';
 background: linear-gradient(to right bottom,#96d9ff,#5cafff,#96d9ff);
 border-radius: 999px;
 z-index: 8;
 left: 50%;
 top:50%;
 margin-left: -84px;
 margin-top:-84px;
}
<div class="logo">
 <div class="before-high-light"></div>
</div>

效果圖：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

.left-top-high-light{
 position: absolute;
 width: 298px;
 height: 298px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 50%);
 border-radius: 999px;
 z-index: 7;
 left: 50%;
 top:50%;
 margin-left: -149px;
 margin-top:-149px;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
</div>

效果圖：

7、畫云，一共三朵，放在右下角，白色背景，利用內陰影，給云上色(放在chrome調整，這塊比較麻煩，需要細細調)，由于css容器樣式的局限性，不能讓云成為一個整體，建議這類可以考慮用svg或者canvas實現，我這里還是用div來實現：

.clouds{
 position: absolute;
 width: 90px;
 height: 90px;
 background-color: #fff;
 border-radius: 999px;
 z-index: 16;
 bottom: 20px;
 right:60px;
 box-shadow: -3px 15px 12px 0 rgba(42,127,236,.3) inset;
}
.clouds:before{
 content:'';
 position: absolute;
 width: 100px;
 height: 70px;
 background-color: #fff;
 border-radius: 999px;
 bottom: -20px;
 left:-30px;
 box-shadow: 5px -5px 8px 0 rgba(42,127,236,.3) inset;
}
.clouds:after{
 content:'';
 position: absolute;
 width: 123px;
 height: 60px;
 background-color: #fff;
 border-radius: 0 999px 999px 0;
 bottom: -20px;
 right:-30px;
 box-shadow: -16px -9px 11px 0 rgba(42,127,236,.3) inset;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
</div>

效果圖：

8、左下角，云之下的高光，這個高光容器，寬高為 logo 的一半，左下角為全圓角，其他三個角可以不設置圓角，z-index 置于前面所有內容的下面，logo 的上面，背景為從左上到右下，從無到有的白色漸變，如果覺得太生硬，可以稍微給點羽化：

.left-bottom-high-light{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 70%);
 border-radius:0 0 0 999px;
 z-index: 14;
 left:0;
 bottom:0;
 filter: blur(1px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
</div>

效果圖：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

.shadow{
 position: absolute;
 width:200px;
 height:10px;
 content:'';
 background:#666;
 border-radius:50%;
 z-index: 1;
 left: 50%;
 bottom:-3px;
 margin-left: -100px;
 filter: blur(4px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
</div>

效果圖：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

.high-light{

position: absolute;

width:100px;

height:20px;

content:'';

background:rgba(255,255,255,.9);

border-radius:50%;

z-index: 15;

left: -8px;

top: 33px;

filter: blur(4px);

transform: rotate(-45deg);

}

</div>

最終效果圖：

作鏤空的較為復雜的模型，不是傳統方法所能勝任的。假如我們通過遮罩將一個球體需要鏤空的地方去掉，再為其增加厚度，球體就可以變成復雜的鏤空球體。而ZBrush?的自定義遮罩形狀和ZBrush新加的功能Subtool中的Extract功能制作有厚度的鏤空球體為此方法提供了實際操作的可能。

制作過程和技巧

1.ZBrush中的標準幾何體是參數化物體，而參數化物體是不能用Subtool下的Extract命令的，所以要先將參數化物體進行轉換。

選擇Tool>Sphere3D, 在ZBrush中建立一個球體。點擊Tool>Make Polymesh3D將參數化球體轉化為Polymesh球體以便進行Extract命令。如圖所示。

為做出更多細節，增大球體的細分，點擊Tool>Geometry>Divide將球體增加到第四級細分（此步驟按讀者電腦配置而定，越高越好）。如圖所示。

2.假如確定了遮罩形狀，用按住Ctrl鍵拖動的方法建立遮罩，遮罩在球體上的分布不能達到我們的需要，因為遮罩不能精確的定位。如圖所示。

而貼圖因為有UV分布的關系可以在模型上精確的分布，我們能否利用貼圖的精確定位的能力來決定遮罩的分布呢，答案是肯定的。在Tool>Masking下的Mask By Intensity命令可以按照貼圖灰度的強度控制遮罩的分布。

點擊Texture>Import或點擊如圖位置將素材圖片AsileFX_Alpha_0329導入。如圖所示。

旋轉視圖觀察發現貼圖的分布并不想我們想象中的完美，兩邊更有極點，如圖所示，這是UV的分布問題，只要調整UV的分布即可。

點擊Tool> Geometry>Lower Res降低球體細分至第一級，選擇Tool>Texture>Uvp將球體的UV分布調節成展平式分布，使貼圖的分布達到較為滿意的效果。如圖所示。

注：1.只有在最低細分下才可以調節UV的分布方式，否則將會有如下提示。

3.Tool>Texture下有幾種UV的分布方式，計算模式各有優缺點，選擇時按情況而定。返回球體第四級細分，點Tool>Masking>Mask By Intensity選項，使遮罩按照貼圖的灰度分布。

在Texture菜單下選擇Texture off,或者在如圖所示位置選擇，去掉貼圖，發現遮罩遮住貼圖的黑色部分與我們需要的相反，按住Ctrl鍵左鍵單擊視圖使遮罩反向，達到我們要求的遮罩。如圖所示。

4.接下來就可以利用Extract命令產生新的鏤空物體。

單擊Tool>Subtool>Extract，按照球體的遮罩產生帶有一定厚度的新物體，并在Subtool里產生新的一層，如圖所示。

關閉球體的顯示，就可以看到球體的鏤空效果了。

5.鏤空球體的邊緣不是很圓滑，這是因為貼圖的質量和球體的細分不足，只要進行一下平滑，即可達到我們想要的效果，如圖所示。

選擇Tool>Deformation>Smooth，選擇XYZ將其值調至100，如圖。

注：鏤空球體平滑次數可視情況而定，制作出的邊緣平滑度也和細分有關，細分越高初始的邊緣也越光滑。

6.使用同樣的方法利用圖AsileFX_Alpha_0347再建立另一個不同花紋的鏤空球體。如圖所示。

只關閉球體顯示后發現兩個鏤空球體一樣的，如下圖所示，不符合我們的要求。我們可以利用Deformation調整兩個鏤空球體的空間關系來達到我們所要求的效果。

選擇第二次建立的鏤空球體層（選擇那一層樓空球體操作可按照個人喜好），選擇Tool>Deformation>Size，選擇XYZ將其值調至-20。兩個樓空球體變得一大一小。

觀察發現因為貼圖在球體中間難免有拉伸，造成鏤空效果在中間比較簡單，為保證其藝術效果，可以將鏤空球體稍微建議旋轉加以旋轉，使整體復雜感增強。

選擇第二次建立的鏤空球體層（選擇那一層樓空球體操作可按照個人喜好），選擇Tool>Deformation>Rotate，選擇XY將其值調至90。

注：Deformation下的XYZ是所選命令可影響的軸向，在調節平滑和大小的時侯，打開三個軸向是因為要效果要對整體進行，而旋轉時，只要在一個平面進行，所以只要選擇XY即可。至此模型制作完成。如圖所示。

（原文來自：http://www.zbrushcn.com/shili/loukong-xiaoguo.html）

在線咨詢

上一篇：講道理，這些都是網頁設計中最基礎的字體排版知識
下一篇：HTML5常用標簽大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端實用的CSS技巧

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

3、給 logo 的 after 上個灰色，做出鏤空效果：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

您的項目需求