国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wapeyang / 2866人閱讀

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

使用CSS實(shí)現(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 定義漸變的顏色，可以使用百分比指定漸變長(zhǎng)度。比如：

 background: linear-gradient(180deg, #F80 70%, #2ED);

則變成了醬子：

背景色漸變非常簡(jiǎn)單，但上面的css代碼中，linear-gradient是加在background屬性上的。于是測(cè)試下具體是加在了哪個(gè)屬性上，首先感性上就覺(jué)得是加在了background-color上，修改代碼background為background-color之后，果然，漸變色沒(méi)有了。
仔細(xì)看下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)該是個(gè)image了，修改代碼background為background-image，結(jié)果漸變色保持如上圖。

字體漸變

字體漸變沒(méi)那么容易想到了，參考了張?chǎng)涡翊笊竦奈恼?，?shí)現(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 是個(gè)非標(biāo)準(zhǔn)屬性，但多數(shù)瀏覽器支持帶-webkit前綴，所以使用時(shí)需要帶上-webkit前綴。

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

以上兩條，通常使用postcss時(shí)是不會(huì)自動(dòng)加前綴的，所以也就不能偷懶。

要注意-webkit-text-fill-color: transparent對(duì)字體帶來(lái)的影響，因?yàn)樵O(shè)置了透明，筆者在使用時(shí)踩了坑，同時(shí)使用了text-overflow: ellipsis; 這個(gè)時(shí)候是看不到點(diǎn)點(diǎn)點(diǎn)的。

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

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

給border-image加linear-gradient不難理解，但是如果單純使用border-image，會(huì)發(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的簡(jiǎn)寫(xiě)。

border-image-source 屬性可以給定一個(gè)url作為邊框圖像，類似background-image: url的用法；

border-image-slice是指將邊框圖片切成9份，四個(gè)角四個(gè)邊，和一個(gè)中心區(qū)域。被切割的9個(gè)部分分布在邊框的9個(gè)區(qū)域。

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

References

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

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

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

相關(guān)文章

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

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

    printempw 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——CSS

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

    nicercode 評(píng)論0 收藏0

  • 前端面試之CSS3新特性

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

    glumes 評(píng)論0 收藏0

  • css3

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

    RancherLabs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<