background-clipcss3 背景影象區域
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
例子：background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-origin: css3背景影象定位
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-sizecss3背景大小
css3多重背景影象
css3背景屬性整合
css3漸變
css3 線性漸變linear-gradient
垂直方向漸變（預設）
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: linear-gradient(red, blue);
水平方向漸變
background: -webkit-linear-gradient(left, red , blue);
background: -moz-linear-gradient(right, red, blue);
background: -o-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
對角background: -webkit-linear-gradient(left top, red, yellow, blue);
background: -moz-linear-gradient(right bottom, red, yellow, blue);
background: -o-linear-gradient(right bottom, red, yellow, blue);
background: linear-gradient(to right bottom, red, yellow, blue);
自定義角度
background: -webkit-linear-gradient(135deg, red, yellow, blue);
background: -moz-linear-gradient(135deg, red, yellow, blue);
background: -o-linear-gradient(135deg, red, yellow, blue);
background: linear-gradient(135deg, red, yellow, blue);
漸變範圍
background: -webkit-linear-gradient(90deg, red10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
多重漸變repeating-linear-gradient
background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
徑向漸變 預設橢圓radial-gradient
background: -webkit-radial-gradient(red, blue);
background: -moz-radial-gradient(red, blue);
background: -o-radial-gradient(red, blue);
background: radial-gradient(red, blue);
徑向漸變 圓形circle重複漸變repeating
background: -webkit-radial-gradient(circle, red, blue);
background: -moz-radial-gradient(circle, red, blue);
background: -o-radial-gradient(circle, red, blue);
background: radial-gradient(circle, red, blue);
徑向漸變closet-side最近邊farthest-side最遠邊closest-corner最近角farthest-corner最遠角
background: -webkit-radial-gradient(closet-sidecircle, red, blue);
background: -moz-radial-gradient(closet-sidecircle, red, blue);
background: -o-radial-gradient(closet-sidecircle, red, blue);
background: radial-gradient(closet-sidecircle, red, blue);
ie6~8漸變
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ff0000', endcolorstr='#0000ff',gradienttype=2 );
css3 背景漸變
在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...
css3實現背景漸變
一 線性漸變 詳細 在css3中，可以使用 linear gradient實現背景線性漸變。linear gradient to left right top bottom 在ff瀏覽器時需要將樣式 書寫成 moz linear gradient chrome瀏覽器時需要寫成 webkit line...