摘要:中的阴影,我知道的就是盒阴影和文字阴影。两者使用大同小异。超出边框会溢出。所以要配合强制不换行溢出隐藏三个共同使用才有效果
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/52173.html
摘要:中的阴影,我知道的就是盒阴影和文字阴影。两者使用大同小异。超出边框会溢出。所以要配合强制不换行溢出隐藏三个共同使用才有效果 CSS3中的阴影,我知道的就是盒阴影和文字阴影。两者使用大同小异。 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊。用了之后发现好像还行,使页面更有立体感了那么一点点。看起来趣味性强一点。 文字阴影: text-shadow:x,y,z,color;...
阅读 971·2023-04-25 14:41
阅读 2420·2021-09-28 09:35
阅读 3602·2019-08-30 15:53
阅读 1916·2019-08-29 15:26
阅读 977·2019-08-28 17:59
阅读 3765·2019-08-26 13:45
阅读 2816·2019-08-26 13:33
阅读 1617·2019-08-26 11:46