摘要:中的陰影,我知道的就是盒陰影和文字陰影。兩者使用大同小異。超出邊框會(huì)溢出。所以要配合強(qiáng)制不換行溢出隱藏三個(gè)共同使用才有效果
CSS3中的陰影,我知道的就是盒陰影和文字陰影。兩者使用大同小異。
1.文字陰影不知道為啥陰影會(huì)被開(kāi)發(fā)出來(lái),覺(jué)得這沒(méi)啥好用啊。用了之后發(fā)現(xiàn)好像還行,使頁(yè)面更有立體感了那么一點(diǎn)點(diǎn)。看起來(lái)趣味性強(qiáng)一點(diǎn)。
文字陰影:
text-shadow:x,y,z,color; -x偏移量,x軸為文字左邊 -y偏移量,y軸為文字頂部 -z:陰影模糊半徑 -color:陰影顏色
理解x和y的含義,顏色可以疊加的,里面有代碼!!!!
注意:陰影可以添加多層!注意;中間逗號(hào)間隔,并且需要是完整的一套(就是三個(gè)數(shù)字都要有)。
eg: (多層顏色,紅色和綠色。)
text-shadow:10px 10px 5px red, 20px 20px 6px green;
偏移量設(shè)置小一點(diǎn),是不是美美噠,想看效果請(qǐng)狠狠點(diǎn)擊。里面有代碼!!!!
2.盒陰影大同小異啦,但是還是有不一樣的地方,仔細(xì)看看啦。
盒陰影:
box-shadow:x,y,z,h,color; - inset (可選:寫(xiě)的話(huà)就是內(nèi)陰影,不寫(xiě)的話(huà)就是外陰影) -x軸偏移 -y軸偏移 -陰影模糊半徑 -擴(kuò)展陰影半徑 (是用陰影顏色,填充擴(kuò)展半徑后,再進(jìn)行陰影模糊) -color:陰影顏色
一個(gè)浮夸的帶了陰影的盒子,里面有代碼!!!!
3.文本省略有時(shí)候文本太多裝不下,怎么破???
使用文本省略,不再愁!!!
文本省略:
text-overflow:
ellipsis 省略
clip 剪切(不考慮使用,感官不好)
不使用文本省略時(shí)候的效果
使用文本省略,然鵝并沒(méi)有效果
使用了文本省略為啥沒(méi)有效果,因?yàn)橹形奈谋緯?huì)自動(dòng)換行。
超出邊框會(huì)溢出。
所以要配合
white-space:nowrap;(強(qiáng)制不換行)
overflow:hidden(溢出隱藏)
三個(gè)共同使用才有效果
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52173.html
摘要:中的陰影,我知道的就是盒陰影和文字陰影。兩者使用大同小異。超出邊框會(huì)溢出。所以要配合強(qiáng)制不換行溢出隱藏三個(gè)共同使用才有效果 CSS3中的陰影,我知道的就是盒陰影和文字陰影。兩者使用大同小異。 1.文字陰影 不知道為啥陰影會(huì)被開(kāi)發(fā)出來(lái),覺(jué)得這沒(méi)啥好用啊。用了之后發(fā)現(xiàn)好像還行,使頁(yè)面更有立體感了那么一點(diǎn)點(diǎn)。看起來(lái)趣味性強(qiáng)一點(diǎn)。 文字陰影: text-shadow:x,y,z,color;...
摘要:語(yǔ)法說(shuō)明對(duì)象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴(kuò)展半徑陰影顏色內(nèi)陰影,向右偏移,向下偏移,模糊半徑,陰影縮小屬性的參數(shù)設(shè)置取值陰影類(lèi)型此參數(shù)可選。 CSS3 是最新的 CSS 標(biāo)準(zhǔn),并且完全向后兼容,不過(guò)目前W3C 仍然在對(duì) CSS3 規(guī)范進(jìn)行開(kāi)發(fā),雖然標(biāo)準(zhǔn)的規(guī)范還沒(méi)有正式發(fā)布,但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性,模糊了之前只...
閱讀 997·2023-04-25 14:41
閱讀 2454·2021-09-28 09:35
閱讀 3624·2019-08-30 15:53
閱讀 1944·2019-08-29 15:26
閱讀 1070·2019-08-28 17:59
閱讀 4284·2019-08-26 13:45
閱讀 2840·2019-08-26 13:33
閱讀 1645·2019-08-26 11:46