資訊專欄INFORMATION COLUMN
摘要：使用實現背景色漸變邊框漸變，字體漸變的效果。定義漸變的顏色，可以使用百分比指定漸變長度。比如則變成了醬子背景色漸變非常簡單，但上面的代碼中，是加在屬性上的。被切割的個部分分布在邊框的個區域。
使用CSS實現背景色漸變、邊框漸變，字體漸變的效果。
背景色漸變.bg-block {
background: linear-gradient(to bottom, #F80, #2ED);
}
效果如圖：
linear-gradient: ([
angle | side-to corner 定義了漸變線，to-bottom 等同于180deg, to-top 等同于0deg。
color-stop 定義漸變的顏色，可以使用百分比指定漸變長度。比如：
background: linear-gradient(180deg, #F80 70%, #2ED);
則變成了醬子：
背景色漸變非常簡單，但上面的css代碼中，linear-gradient是加在background屬性上的。于是測試下具體是加在了哪個屬性上，首先感性上就覺得是加在了background-color上，修改代碼background為background-color之后，果然，漸變色沒有了。
仔細看下linear-gradient的定義：
Thelinear-gradient()function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of thedata type, which is a special kind of [ ]
于是，這應該是個image了，修改代碼background為background-image，結果漸變色保持如上圖。
字體漸變字體漸變沒那么容易想到了，參考了張鑫旭大神的文章，實現如下：
.font-block {
font-size: 48px;
background-image: linear-gradient(to bottom,#F80, #2ED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
效果如下：
這種字體漸變的方法可以這么理解：字體本身是有顏色的，先讓字體本身的顏色變透明（text-fill-color為transparent），然后添加漸變的背景色(background-image: line-gradient...)，但是得讓背景色作用在字體上(background-clip: text)。
要注意的是：
text-fill-color 是個非標準屬性，但多數瀏覽器支持帶-webkit前綴，所以使用時需要帶上-webkit前綴。
background-clip屬性雖然多數瀏覽器已經支持，但text屬性值瀏覽器支持還需要加-webkit前綴。（參考這里：https://developer.mozilla.org...）
以上兩條，通常使用postcss時是不會自動加前綴的，所以也就不能偷懶。
要注意-webkit-text-fill-color: transparent對字體帶來的影響，因為設置了透明，筆者在使用時踩了坑，同時使用了text-overflow: ellipsis; 這個時候是看不到點點點的。
邊框漸變.border-block {
border: 10px solid transparent;
border-image: linear-gradient(to top, #F80, #2ED);
border-image-slice: 10;
}
實現效果如下:
給border-image加linear-gradient不難理解，但是如果單純使用border-image，會發現效果是這樣的：
所以關鍵作用是border-image-slice屬性。
先看下border-image屬性。
border-image是border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat的簡寫。
border-image-source 屬性可以給定一個url作為邊框圖像，類似background-image: url的用法；
border-image-slice是指將邊框圖片切成9份，四個角四個邊，和一個中心區域。被切割的9個部分分布在邊框的9個區域。
當盒子寬度和被切圖像的寬度不相等時，四個頂角的變化具有一定的拉伸效果。border-image-slice屬性默認值是100%，這個百分比是相對于邊框圖像的寬高來的，當左右切片寬度之和>100%時，5號7號就顯示空白，因此使用默認值無法看到被填滿的邊框圖片。關于boder-image具體可以參考這篇References第一篇文章，講的比較詳細。
References1.CSS3邊框圖片詳解：http://www.360doc.com/content...
2.linear-gradient MDN:
https://developer.mozilla.org...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113001.html
摘要：原文地址本篇文章是筆者的設計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設計指南進行一些總結，沒有看之前第一部分的話也可以從這里傳送過去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設計指南》 學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...
摘要：父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為，并設置其背景顏色設置的上外邊距為觀察其結果。 前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表） 2.作用 設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML：負責內容的展示 CSS：負責內容（元素）...
摘要：和這三個特性是新增的和動畫相關的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進行轉換。設置列之間的寬度樣式和顏色規則和和用戶界面中，新的用戶界面特性包括重設元素尺寸盒尺寸以及輪廓等。 除了html5的新特性，CSS3的新特性也是面試中經常被問到的。 選擇器 CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。 element1~...
css3新增選擇器 屬性選擇器 包括h5中新增的自定義屬性 p[data-id]{color: red} sasas 屬性選擇器可以指定屬性值 的樣式變化 E[attr=value] 指定屬性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才會...
閱讀 2831·2023-04-25 20:06
閱讀 1449·2021-08-26 14:15
閱讀 2239·2021-08-12 13:27
閱讀 1775·2019-08-30 15:55
閱讀 3476·2019-08-30 13:20
閱讀 2831·2019-08-29 15:12
閱讀 3336·2019-08-29 15:06
閱讀 2862·2019-08-29 14:13
