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

魏宪会发布于2019-08-30 15:53 / 2751人阅读

摘要：中的阴影，我知道的就是盒阴影和文字阴影。两者使用大同小异。超出边框会溢出。所以要配合强制不换行溢出隐藏三个共同使用才有效果

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(溢出隐藏)

三个共同使用才有效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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