border-radius 圓角 參數可為像素 也可為百分比 當一個參數時 作用範圍為四個角 當兩個參數時 作用範圍為 左上右下 右上左下 當三個參數時 作用範圍為 左上 右上左下 右下 當四個參數時 作用範圍為 左上 右上 右下 左下 當參數中有'/'時 例如 100px/150px 則表示:X軸 ...
border-radius 圓角
參數可為像素 也可為百分比
當一個參數時 作用範圍為四個角
當兩個參數時 作用範圍為 左上右下 右上左下
當三個參數時 作用範圍為 左上 右上左下 右下
當四個參數時 作用範圍為 左上 右上 右下 左下
當參數中有'/'時 例如 100px/150px 則表示:X軸半徑/Y軸半徑
-border-image 邊框背景
-border-image:圖片鏈接 圖片切割上下 圖片切割左右 邊框排列方式 ;
border-image-repeat:;邊框排列方式
round 平鋪 與repeat效果一樣
repeat 重覆
stretch 拉伸 預設
在-webkit-中會自動補上中間部分
-moz-border-left-colors: 邊框多色彩處理
例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
註：目前只在火狐中起效果
-webkit-repeating-linear-gradient 平鋪漸變
-linear-gradient: 線性漸變
IE9及9以下不支持線性漸變
通過濾鏡處理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');
可相容到IE6
startColorstr 開始顏色
endColorstr 結束顏色
GradientType 1為從left->right 0為從top->bottom
-radial-gradient:方向，關鍵字(可選)，顏色;
徑向漸變關鍵字
closest-size 向最近端漸變
closest-corner 向最近角漸變
farthest-corner 向最遠角漸變
contain 包含(元素將其包含 使其漸變不會超出元素周圍)
cover 覆蓋(漸變將整個元素鋪滿)
background-size:背景尺寸
background-size:contain 包含(縮小) 元素包含背景圖(背景圖剛好放進盒子里)
cover 覆蓋(放大) 背景圖等比放大後將元素填滿
background-origin:背景圖原點設置
background-origin:border-box; 從邊框開始計算
content-box 從內容開始計算
padding-box 從內補白開始計算(預設)
background-clip: 背景裁剪
background-clip:border-box; 預設
解決背景半透明邊框顯示背景圖片的問題:
padding-box 切除padding以外的背景
content-box 切除content以外的背景
-webkit-background-clip:text; 切除文字以外的背景(目前火狐不適用)
