前端還在切圖？學完這些css，不再用切圖了！

時間 2020-07-18

標籤前端還在這些 css 不再欄目 CSS 简体版

原文原文鏈接

標題開個玩笑，實際上CSS3有許多亮眼的特性，好比陰影shadow、動畫animation、形變transform、漸變gradient、濾鏡filter等，合理運用這些特性，能夠實現許多高大上的效果。若是以爲有用請點個贊或者收藏。css

三角形

利用border-color支持transparent這一特性，隱藏三條邊框，實現三角形。html

 <style>
 .triangle {
   width: 0;
   height: 0;
   border-style: solid;
   box-sizing: border-box;
   border-width: 0 10px 10px;
   border-color: transparent transparent #c5c5c5 transparent;
 }
 </style>
 <div class="triangle"></div>

效果以下：web

左上三角形

 <style>
 .left-top-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   box-sizing: border-box;
   border-width: 10px;
   border-color: #c5c5c5 transparent transparent #c5c5c5;
 }
 </style>
 <div class="left-top-triangle"></div>

效果以下：瀏覽器

正五邊形

 <style>
 .pentagon {
   width: 54px;
   position: relative;
   border-width: 50px 18px 0;
   border-style: solid;
   border-color: #c5c5c5 transparent;
 }
 
 .pentagon::before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   top: -85px;
   left: -18px;
   border-width: 0 45px 35px;
   border-style: solid;
   border-color: transparent transparent #c5c5c5;
 }
 </style>
 <div class="pentagon"></div>

效果以下： ide

氣泡框

使用絕對定位進行三角形覆蓋，實現氣泡框突出部分。svg

 <style>
 .bubble-tip {
   width: 100px;
   height: 30px;
   line-height: 30px;
   margin-left: 10px;
   border: 1px solid #c5c5c5;
   border-radius: 4px;
   position: relative;
   background-color: #fff;
 }
 .bubble-tip::before {
   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 10px 10px 10px 0;
   border-color: transparent #ffffff transparent transparent;
   position: absolute;
   top: 5px;
   left: -10px;
   z-index: 2;
 }
 .bubble-tip::after {
   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 10px 10px 10px 0;
   border-color: transparent #c5c5c5 transparent transparent;
   position: absolute;
   top: 5px;
   left: -11px;
   z-index: 1;
 }
 </style>
 <div class="bubble-tip"></div>

效果以下：函數

陰影效果

box-shadow實現

語法：性能

 box-shadow: offest-x offest-y blur-radius spread-radius color inset;

值	是否必選	描述
offest-x	是	陰影水平偏移量。正值陰影則位於元素右邊，負值陰影則位於元素左邊。
offest-y	是	陰影垂直偏移量。正值陰影則位於元素下方，負值陰影則位於元素上方。
blur-radius	否	陰影模糊半徑。值越大，模糊面積越大，陰影就越大越淡。不能爲負值。默認爲0，此時陰影邊緣銳利。
spread-radius	否	陰影擴散半徑。取正值時，陰影擴大；取負值時，陰影收縮。默認爲0，此時陰影與元素一樣大。
color	否	陰影顏色
inset	否	陰影擴散方向的關鍵字之一，改變陰影擴散爲朝內。默認關鍵字爲outset，即陰影在邊框外，向外擴散。

有三點值得注意：動畫

若元素設置了border-radius屬性，那麼陰影也會有圓角效果。url

同一個元素能夠設置多個陰影效果，使用逗號分隔。

同個元素上的多個陰影在z軸上，按照第一個陰影在最上面的順序依次排列。

 <style>
 .box-shadow {
   width: 500px;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 -1em 1em rgba(100, 150, 200, .5) inset,
               0 0 0 2px #ff3333,
               0.3em 0.3em 0.5em 10px rgb(198, 200, 100);
 }
 </style>
 
 <div class="box-shadow">
   明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
   轉朱閣，低綺戶，照無眠。不該有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。希望人長久，千里共嬋娟。
 </div>

效果以下：

filter濾鏡實現

filter屬性將模糊或顏色偏移等圖形效果應用於元素。一般用於調整圖像，背景和邊框的渲染。配合其內置函數，能夠實現許多豐富多彩的效果。好比陰影圖像、灰度圖像等。詳見filter-MDN。

函數	描述
url()	接受一個XML文件，該文件設置了一個SVG濾鏡，且能夠包含一個錨點來指定一個具體的濾鏡元素。例如：`filter: url(resources.svg#element-id)`
blur(radius)	「radius」一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一塊兒，因此值越大越模糊；若是沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。
brightness()	給圖片應用一種線性乘法，使其看起來更亮或更暗。若是值是0%，圖像會全黑。值是100%，則圖像無變化。其餘的值對應線性乘數效果。值超過100%也是能夠的，圖像會比原來更亮。若是沒有設定值，默認是1。
contrast()	調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值能夠超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。
drop-shadow()	給圖像設置一個陰影效果。陰影是合成在圖像下面，能夠有模糊度的，能夠以特定顏色畫出的遮罩圖的偏移版本。與上面box-shadow屬性值類似，不過沒有inset/outset關鍵字。
grayscal	將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則徹底轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。可參考下面全屏灰色的例子。
hue-rotate()	給圖像應用色相旋轉。「angle」一值設定圖像會被調整的色環角度值。值爲0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值至關於又繞一圈。
invert()	反轉輸入圖像。值定義轉換的比例。100%的價值是徹底反轉。值爲0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設置，值默認是0。
opacity()	轉化圖像的透明程度。值定義轉換的比例。值爲0%則是徹底透明，值爲100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也至關於圖像樣本乘以數量。若值未設置，值默認是1。該函數與已有的opacity屬性很類似，不一樣之處在於經過filter，一些瀏覽器爲了提高性能會提供硬件加速。
saturate()	轉換圖像飽和度。值定義轉換的比例。值爲0%則是徹底不飽和，值爲100%則圖像無變化。其餘值，則是效果的線性乘子。超過100%的值是容許的，則有更高的飽和度。若值未設置，值默認是1。
sepia()	將圖像轉換爲深褐色。值定義轉換的比例。值爲100%則徹底是深褐色的，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。

 <style>
 .filter-shadow {
   width: 500px;
   padding: 20px;
   filter: drop-shadow(0.3em 0.3em 0.5em rgb(198, 200, 100));
 }
 </style>
 
 <div class="filter-shadow">
   明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
   轉朱閣，低綺戶，照無眠。不該有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。希望人長久，千里共嬋娟。
 </div>

效果以下：

二者區別

其實代碼和效果上就能夠看出來：

box-shadow是給元素「盒子」的添加陰影，drop-shadow是給元素「自身」增長陰影。
box-shadow支持陰影疊加，dropshadow不行。
參數值不一樣。有些瀏覽器drop-shadow不支持spread-radius，且drop-shadow沒有inset關鍵字。
兼容性不一樣。box-shadow從IE9就開始支持，而drop-shadow從IE13纔開始支持。詳見css-boxshadow 、css-filters

全屏灰色（特殊日期使用）

使用濾鏡filter的grayscale函數。

 <style>
 .filter {
   -webkit-filter: grayscale(100%); /* webkit */
   -moz-filter: grayscale(100%); /*firefox*/
   -ms-filter: grayscale(100%); /*ie9*/
   -o-filter: grayscale(100%); /*opera*/
   filter: grayscale(100%);
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
   filter: gray; /*ie9- */
 }
 </style>
 <html class="filter">
   <img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830_960_720.jpg" />
 </html>

效果以下：

漸變

CSS3的一個重要特性就是漸變gradients，其輸出爲一種類型的子類型，可用於類型值的地方。除了線性漸變linear-gradient和radial-gradient之外，還能支持重複線性漸變repeating-linear-gradient和重複徑向漸變repeating-radial-gradient。實現斑馬線就是依靠重複線性漸變。詳見gradient-MDN。

斑馬線

利用重複線性漸變repeating-linear-gradient。語法以下：

 background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

值	描述
angle	定義漸變的角度方向。從 0deg 到 360deg，默認爲 180deg。
side-or-corner	指定線性漸變的起始位置。由兩個關鍵字組成：第一個爲指定水平位置(left 或 right)，第二個爲指定垂直位置（top 或bottom）。順序是隨意的，每一個關鍵字都是可選的。
color-stop1, color-stop2,...	指定漸變的起止顏色，由顏色值、中止位置（可選，使用百分比指定）組成。

 <style>
 .zebra-crossing {
   width: 500px;
   height: 300px;
   background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, #000 25px, #000 50px);
 }
 </style>
 <div class="zebra-crossing"></div>

效果以下：

卡券貼

在CSS3當中，background添加了background-size屬性，控制背景圖片的大小，配合background-position屬性，能夠在一個背景下面展現多張圖片。詳見background-MDN。

卡券貼的核心是使用透明白色徑向漸變radial-gradient，分別讓4張背景圖中的左下角、右下角、右上角和左下角出現缺省，再利用drop-shadow實現元素陰影，從而達到效果。

radial-gradient語法以下：

 radial-gradient(shape size at position, start-color, ..., last-color)

值	描述
shape	肯定圓的類型: ellipse (默認): 指定橢圓形的徑向漸變。 circle ：指定圓形的徑向漸變
size	定義漸變的大小，可能值： farthest-corner (默認) : 指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角 closest-side ：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊 closest-corner ：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角 farthest-side ：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊
position	定義漸變的位置。可能值： center（默認）：設置中間爲徑向漸變圓心的縱座標值。 top：設置頂部爲徑向漸變圓心的縱座標值。 bottom：設置底部爲徑向漸變圓心的縱座標值。可混合使用，如top right
start-color, ..., last-color	用於指定漸變的起止顏色。

 <style>
 .coupon{
   width: 200px;
   height: 80px;
   background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
     radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
     radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
     radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
   filter: drop-shadow(3px 3px 3px #c5c5c5);
 }
 </style>
 
 <div class="coupon"></div>

效果以下：

文本溢出自動省略號

核心是CSS3屬性text-overflow: ellipsis。

 <style>
 .ellipsis {
   width: 500px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 </style>
 <div class="ellipsis">
   明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
   轉朱閣，低綺戶，照無眠。不該有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。希望人長久，千里共嬋娟。
 </div>