H5--第四课

Posted 2020-08-23 卡尔也好玩

一、圆角属性：border-radius属性

　　　　　　   4个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

　　　　　　   3个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

   　　　　　　2个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

　　　　　　   1个值： 四个圆角值相同

　　　　　　　border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius！

二、文本阴影：text-shadow属性

　　　　　　   text-shadow:5px 5px 5px #f00;

三、文本溢出时显示单选和省略号：文本不换行white-space:nowrap;溢出隐藏overflow:hidden;显示省略号text-overflow:eclipsis;（三个属性要同时用才有效）！

　　文本溢出时显示多行和省略号：第一就是用JS做。第二就是只有chrom才有的方法，display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;

四、文本描边：text-stroke属性;

　　　　　　   text-stroke：<‘ text-stroke-width ‘> || <‘ text-stroke-color ‘>;

五、文字大小写：text-transform属性;

六、过渡：transition----重点！

七、动画：animation----重点！