当前位置: 首页 > Web前端 > HTML

CSS3中的新属性有哪些-阴影,文字省略号(一)

时间:2023-04-02 20:32:39 HTML

CSS3中的阴影,我所知道的就是框阴影和文字阴影。两者的使用方式大致相同。1.文字阴影不知道为什么要开发阴影,觉得没什么用。用了之后发现好像还可以,让页面多了一点立体感。看起来更有趣一点。文字阴影:text-shadow:x,y,z,color;-xoffset,x轴为文字左侧-yoffset,y轴为文字上方-z:阴影模糊半径-color:阴影颜色理解x和y的含义,颜色可以叠加,里面有密码!!!!注意:阴影可以添加到多个图层中!笔记;中间逗号隔开,需要是一个完整的集合(即必须有三个数)。例如:(多层颜色,红色和绿色。)text-shadow:10px10px5pxred,20px20px6pxgreen;偏移量设置小一点,是不是很漂亮,请用力点一下看效果。里面有代码!!!!2.boxshadows都差不多,还是有区别的,仔细看看。框阴影:box-shadow:x,y,z,h,color;-inset(可选:写了就是内阴影,不写就是外阴影)-x轴偏移量-y轴偏移量-阴影模糊半径-扩展阴影半径(使用阴影颜色,填充扩展半径,然后模糊阴影)-color:阴影颜色一个夸张的阴影框,里面有代码!!!!3.正文省略。有时候文字太多放不下,怎么打断呢???使用文本省略号,不再担心!!!Textellipsis:text-overflow:ellipsisellipsisclip裁剪(不考虑使用,感觉不好)不使用textellipsis时的效果使用textellipsis,但是没有效果。为什么使用文本省略号没有效果,因为中文文本会自动换行。它溢出了界限。所以必须和white-space:nowrap;一起使用。(强制不换行)overflow:hidden(溢出隐藏)才有效