一、盒子陰影和文字陰影
box-shadow:
盒子陰影 ie9
5個引數：
引數1：水平偏移量 +- 必選
引數2：垂直偏移量 +- 必選
引數3：陰影模糊值 + 必選
引數4：陰影外延值 + 可選
引數5：陰影顏色 必選
外延值是可以省略的
乙個盒子可以使用多個陰影
box-shadow:0 0 12px 3px red,2px 2px 12px 3px blue;
內陰影：陰影預設是外陰影
inset
box-shadow:inset 0 0 3px 10px red;
text-shadow:
文字陰影
4個引數，沒有外延值 ie10
text-shadow:1px 1px 1px red;
二、影象邊框
border-image 設定邊框 ie10
border-image:border-image-source||border-image-slice[/border-image-width?[/border-image-outset]?]?||border-image-repeat
border-image-source:用在邊框影象的路徑
border-image-slice:邊框向內的偏移量
border-image-width:邊框的寬度
border-image-outset:邊框影象區域超出變數的偏移量
border-image-repeat:指定邊框背景圖的填充方式
border-image-repeat: stretch | repeat | round
strecth:預設，拉伸填充
repeat:指定平鋪填充背景，當遇到邊界時，會被截斷
round：指定平鋪填充背景，會根據邊框的尺寸動態的調整的大小，直到的大小剛好可以充滿整個邊框
三、背景 background
1，背景漸變
沒有漸變的時候，做漸變效果，使用一張1px的，上下漸變，使用repeat-x|y平鋪即可實現漸變的狀態
css3中有了漸變屬性，ie9開始相容
語法：background-image:-webkit-linear-gradient(top,red,blue);
-webkit-:谷歌字首
-moz-:火狐
-ms-:ie
-o-:歐朋
1）線性漸變：
-webkit-linear-gradient(top,red,blue);
引數1：top 從上到下漸變
bottom 從下到上漸變
left 從左到右漸變
right 從右到左漸變
top left 左上到右下漸變
deg 角度
px 值
引數2：從哪個顏色開始漸變
引數3：漸變到哪個顏色
使用角度漸變，第乙個值是角度，360deg，不同瀏覽器有不同的分歧：
谷歌，火狐，ie，歐朋水平向左為0deg，向下90deg；
如果不加字首就是w3c的標準，垂直向下為0deg，水平向左為90deg
通常我們不使用角度變化，一般使用方位詞
漸變顏色可以有很多，使用逗號隔開，每個顏色後邊可以跟乙個百分比，代表從**開始這個顏色的漸變，都小於100%
2）徑向漸變
-webkit-radial-gradient()
漸變起始點使用px值確定：
-webkit-radial-gradient(100px 80px,red,blue,yellow)
css3 邊框圓角陰影漸變
css3堅持漸進增強 從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能，向頁面新增無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支援時，它們會自動地呈現出來並發揮作用。原則。相對的是優雅降級原則，即是一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。css3中新增特性包括...
css3 背景漸變
在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...
CSS3邊框背景
邊框背景 border image 邊框背景主要是用來給元素邊框新增背景影象，本質是用一張來修飾邊框背景，看下圖效果 用左邊來完成右邊的效果 先看一下邊框背景的引數 border image image boeder width 引數可寫1 4個 填充方式 stretch repeat round ...