• 竖直水平居中&＃xff08;利用translate&＃xff09;
• 一个顶部带有三角形的文本容器
• 文字过长截断并显示省略号

选择器妙用

• 伪元素选择器
  • ::first-letter(块级元素第一行的第一个字母) 首字母大写
  • ::not&＃xff08;设置一组样式最后一个元素除外&＃xff09; 最后不带通用样式
  • ::selection (文本选中的样式) 改变文本选中的样式

圆角&＃xff08;border-radius&＃xff09;

基础border-radius&＃xff1a;常见的圆角
基础border-radius&＃xff1a;纯CSS画圆
进阶border-radius&＃xff1a;波浪效果
进阶border-radius&＃xff1a;旋转的radius

阴影效果&＃xff08;box-shadows&＃xff09;

动态的阴影(不用box-shadow实现的阴影)
嵌入背景的字体
立体阴影
字体光效

过渡效果 (transition)

bouncing-loader

渐变&＃xff08;linear-gradient&＃xff09;

内容溢出-滚动渐变
grandient-text
最后的文字渐变过渡

hover态效果

hover态滑动出遮罩层
鼠标hover跟踪

未完待续&＃xff0c;如果对您有帮助希望您能star一下&＃xff0c;也欢迎您留言互相交流

• WX &＃xff1a; j565017805