成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS漸變之背景、邊框、字體漸變

wapeyang / 2926人閱讀

摘要：使用實現(xiàn)背景色漸變邊框漸變，字體漸變的效果。定義漸變的顏色，可以使用百分比指定漸變長度。比如則變成了醬子背景色漸變非常簡單，但上面的代碼中，是加在屬性上的。被切割的個部分分布在邊框的個區(qū)域。

使用CSS實現(xiàn)背景色漸變、邊框漸變，字體漸變的效果。

背景色漸變 
.bg-block {
  background: linear-gradient(to bottom, #F80, #2ED);
}

效果如圖：

linear-gradient: ([ | to , ]? [, + ])

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 the  data type, which is a special kind of []

于是，這應(yīng)該是個image了，修改代碼background為background-image，結(jié)果漸變色保持如上圖。

字體漸變

字體漸變沒那么容易想到了，參考了張鑫旭大神的文章，實現(xiàn)如下：

.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 是個非標(biāo)準(zhǔn)屬性，但多數(shù)瀏覽器支持帶-webkit前綴，所以使用時需要帶上-webkit前綴。

background-clip屬性雖然多數(shù)瀏覽器已經(jīng)支持，但text屬性值瀏覽器支持還需要加-webkit前綴。（參考這里：https://developer.mozilla.org...）

以上兩條，通常使用postcss時是不會自動加前綴的，所以也就不能偷懶。

要注意-webkit-text-fill-color: transparent對字體帶來的影響，因為設(shè)置了透明，筆者在使用時踩了坑，同時使用了text-overflow: ellipsis; 這個時候是看不到點點點的。

邊框漸變 
.border-block {
  border: 10px solid transparent;
  border-image: linear-gradient(to top, #F80, #2ED);
  border-image-slice: 10;
}

實現(xiàn)效果如下:

給border-image加linear-gradient不難理解，但是如果單純使用border-image，會發(fā)現(xiàn)效果是這樣的：

所以關(guān)鍵作用是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份，四個角四個邊，和一個中心區(qū)域。被切割的9個部分分布在邊框的9個區(qū)域。

當(dāng)盒子寬度和被切圖像的寬度不相等時，四個頂角的變化具有一定的拉伸效果。border-image-slice屬性默認值是100%，這個百分比是相對于邊框圖像的寬高來的，當(dāng)左右切片寬度之和>100%時，5號7號就顯示空白，因此使用默認值無法看到被填滿的邊框圖片。關(guān)于boder-image具體可以參考這篇References第一篇文章，講的比較詳細。

References

1.CSS3邊框圖片詳解：http://www.360doc.com/content...
2.linear-gradient MDN:
https://developer.mozilla.org...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113001.html

相關(guān)文章

  • CSS 設(shè)計指南 學(xué)習(xí)筆記 二

    摘要：原文地址本篇文章是筆者的設(shè)計指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來得及對設(shè)計指南進行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來得及對 ...

    printempw 評論0 收藏0

  • 前端知識點總結(jié)——CSS

    摘要：父元素沒有上邊框為子元素設(shè)置上外邊距時在中嵌套一個子元素設(shè)置其尺寸為，并設(shè)置其背景顏色設(shè)置的上外邊距為觀察其結(jié)果。 前端知識點總結(jié)——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級聯(lián)樣式表（簡稱：樣式表） 2.作用 設(shè)置HTML網(wǎng)頁元素的樣式 3.HTML與CSS的關(guān)系 HTML：負責(zé)內(nèi)容的展示 CSS：負責(zé)內(nèi)容（元素）...

    nicercode 評論0 收藏0

  • 前端面試之CSS3新特性

    摘要：和這三個特性是新增的和動畫相關(guān)的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進行轉(zhuǎn)換。設(shè)置列之間的寬度樣式和顏色規(guī)則和和用戶界面中，新的用戶界面特性包括重設(shè)元素尺寸盒尺寸以及輪廓等。 除了html5的新特性，CSS3的新特性也是面試中經(jīng)常被問到的。 選擇器 CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。 element1~...

    glumes 評論0 收藏0

  • css3

    css3新增選擇器 屬性選擇器 包括h5中新增的自定義屬性 p[data-id]{color: red} sasas 屬性選擇器可以指定屬性值 的樣式變化 E[attr=value] 指定屬性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才會...

    RancherLabs 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<