[TOC] # 案例1：图片边框  > 1. 必须先设置普通边框 > 2. 图像边框语法 border-image:url() 30 30 30 30 stretch;round;  # 案例2：线性渐变背景  [旧版微信首页http://data.pzhuweb.cn/weixin.html](http://data.pzhuweb.cn/weixin.html) # 案例3：滤镜 修改所有图片的颜色为黑白 (100% 灰度):  ``` img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } ```   # 案例4：等待条 * [ ] 变形 ``` transform: scale(); /*拉伸*/ translate(); /*平移*/ rotate(); /*旋转*/ skew(); /*倾斜*/ ``` * [ ] 动画 ``` animation-name: my;/*动画名称*/ animation-duration: 1.2s;/*动画时间*/ animation-iteration-count: infinite; /*重复次数*/ animation-timing-function: ease-in-out; /*动画曲线*/ animation-delay: 1s;/*延迟时间*/ @-webkit-keyframes my{ 百分比{} } ```