[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{ 百分比{} } ```