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

2022-01-30 22:02:48

CSS3中的阴影，我知道的就是盒阴影和文字阴影。两者使用大同小异。

1.文字阴影

不知道为啥阴影会被开发出来，觉得这没啥好用啊。用了之后发现好像还行，使页面更有立体感了那么一点点。看起来趣味性强一点。

文字阴影：

 text-shadow:x,y,z,color;

  -x偏移量，x轴为文字左边

  -y偏移量，y轴为文字顶部

  -z：阴影模糊半径

  -color：阴影颜色

注意：阴影可以添加多层！注意;中间逗号间隔，并且需要是完整的一套（就是三个数字都要有）。
eg： (多层颜色，红色和绿色。)
text-shadow:10px 10px 5px red, 20px 20px 6px green;

大同小异啦，但是还是有不一样的地方，仔细看看啦。

盒阴影：

box-shadow:x,y,z,h,color;

  - inset (可选：写的话就是内阴影，不写的话就是外阴影)

  -x轴偏移

  -y轴偏移

  -阴影模糊半径

  -扩展阴影半径  （是用阴影颜色，填充扩展半径后，再进行阴影模糊）

  -color：阴影颜色

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

文本省略：
text-overflow:

使用了文本省略为啥没有效果，因为中文文本会自动换行。
超出边框会溢出。
所以要配合
white-space:nowrap;(强制不换行)
overflow:hidden(溢出隐藏)