CSS3中哪些新屬性—陰影、文本省略（1）

魏憲會發布于2019-08-30 15:53 / 2770人閱讀

摘要：中的陰影，我知道的就是盒陰影和文字陰影。兩者使用大同小異。超出邊框會溢出。所以要配合強制不換行溢出隱藏三個共同使用才有效果

CSS3中的陰影，我知道的就是盒陰影和文字陰影。兩者使用大同小異。

1.文字陰影

不知道為啥陰影會被開發出來，覺得這沒啥好用啊。用了之后發現好像還行，使頁面更有立體感了那么一點點。看起來趣味性強一點。

文字陰影：

 text-shadow:x,y,z,color;
  -x偏移量，x軸為文字左邊
  -y偏移量，y軸為文字頂部
  -z：陰影模糊半徑
  -color：陰影顏色

理解x和y的含義，顏色可以疊加的，里面有代碼！！！！

注意：陰影可以添加多層！注意;中間逗號間隔，并且需要是完整的一套（就是三個數字都要有）。
eg： (多層顏色，紅色和綠色。)
text-shadow:10px 10px 5px red, 20px 20px 6px green;

偏移量設置小一點，是不是美美噠，想看效果請狠狠點擊。里面有代碼！！！！

2.盒陰影

大同小異啦，但是還是有不一樣的地方，仔細看看啦。

盒陰影：

box-shadow:x,y,z,h,color;
  - inset (可選：寫的話就是內陰影，不寫的話就是外陰影)
  -x軸偏移
  -y軸偏移 
  -陰影模糊半徑
  -擴展陰影半徑  （是用陰影顏色，填充擴展半徑后，再進行陰影模糊）
  -color：陰影顏色

一個浮夸的帶了陰影的盒子，里面有代碼！！！！

3.文本省略

有時候文本太多裝不下，怎么破？？？
使用文本省略，不再愁！！！

文本省略：
text-overflow:

ellipsis 省略

clip 剪切（不考慮使用，感官不好）

不使用文本省略時候的效果
使用文本省略，然鵝并沒有效果

使用了文本省略為啥沒有效果，因為中文文本會自動換行。
超出邊框會溢出。
所以要配合
white-space:nowrap;(強制不換行)
overflow:hidden(溢出隱藏)

三個共同使用才有效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116675.html

CSS3中哪些新屬性—陰影、文本省略（1）

摘要：中的陰影，我知道的就是盒陰影和文字陰影。兩者使用大同小異。超出邊框會溢出。所以要配合強制不換行溢出隱藏三個共同使用才有效果 CSS3中的陰影，我知道的就是盒陰影和文字陰影。兩者使用大同小異。 1.文字陰影不知道為啥陰影會被開發出來，覺得這沒啥好用啊。用了之后發現好像還行，使頁面更有立體感了那么一點點。看起來趣味性強一點。文字陰影： text-shadow:x,y,z,color;...

沈建明 2019-08-02 10:10 評論0 收藏0
css3整理

W3C的CSS3規范仍在開發，但是，許多新的CSS3屬性已在現代瀏覽器使用 CSS3邊框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(陰影尺寸，可選) color inset(outset外部陰影，可選) border-image border-im...

X1nFLY 2019-08-29 11:19 評論0 收藏0
CSS3 新特性

摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數設置取值陰影類型此參數可選。 CSS3 是最新的 CSS 標準，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規范進行開發，雖然標準的規范還沒有正式發布，但是現代瀏覽器已經支持相當多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 評論0 收藏0