前端還在切圖？學完這些css，再也不用切圖了！-有解無憂

標題開個玩笑，實際上CSS3有許多亮眼的特性，比如陰影shadow、影片animation、形變transform、漸變gradient、濾鏡filter等，合理運用這些特性，可以實作許多高大上的效果，如果覺得有用請點個贊或者收藏，

三角形

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

 <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 ></div>

效果如下：

左上三角形

 <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 ></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 ></div>

效果如下：

在這里插入圖片描述

氣泡框

使用絕對定位進行三角形覆寫，實作氣泡框突出部分，

 <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 ></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屬性，那么陰影也會有圓角效果，

同一個元素可以設定多個陰影效果，使用逗號分隔，

同個元素上的多個陰影在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 >
   明月幾時有，把酒問青天，不知天上宮闕，今夕是何年，我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒，起舞弄清影，何似在人間，
   轉朱閣，低綺戶，照無眠，不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全，但愿人長久，千里共嬋娟，
 </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 >
   明月幾時有，把酒問青天，不知天上宮闕，今夕是何年，我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒，起舞弄清影，何似在人間，
   轉朱閣，低綺戶，照無眠，不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全，但愿人長久，千里共嬋娟，
 </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 >
   <img src="https://img.uj5u.com/2020/09/11/55995111958321.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 ></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 ></div>

效果如下：

文本溢位自動省略號

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

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

效果如下：

總結

別打了，別打了，我切還不行嗎！！真香~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7105.html

標籤：Html/Css

上一篇：循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

下一篇：jQuery的影片以及擴展功能