css3 簡介
CSS3被拆分為"模塊"。舊規(guī)范已拆分成小塊蚯姆,還增加了新的五续。
一些最重要CSS3模塊如下:
選擇器、盒模型龄恋、背景和邊框疙驾、文字特效、2D/3D轉換郭毕、動畫它碎、多列布局
CSS3?邊框
用 CSS3,你可以創(chuàng)建圓角邊框显押,添加陰影框扳肛,并作為邊界的形象而不使用設計程序
1、盒陰影
{
box-shadow: 10px 10px 5px #888888;? /*左右? 上下? 陰影程度 顏色*/
}
2乘碑、邊界圖片
{
-webkit-border-image:url(border.png) 30 30 round;? /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round;? /* Opera */
border-image:url(border.png) 30 30 round;? /*round平鋪? stretch拉伸*/
}
3挖息、圓角
border-top-left-radius 定義了左上角的弧度
border-top-right-radius 定義了右上角的弧度
border-bottom-right-radius 定義了右下角的弧度
border-bottom-left-radius 定義了左下角的弧度
四個值: 第一個值為左上角,第二個值為右上角兽肤,第三個值為右下角套腹,第四個值為左下角。
三個值: 第一個值為左上角, 第二個值為右上角和左下角轿衔,第三個值為右下角
兩個值: 第一個值為左上角與右下角沉迹,第二個值為右上角與左下角
一個值: 四個圓角值相同
代碼:
效果圖:
CSS3 背景
background-image:url('');?
background-position: left top;
background-repeat: repeat;
background-size? 指定背景圖像的大小。
background-origin?屬性指定了背景圖像的位置區(qū)域害驹。
background-clip?背景剪裁屬性是從指定位置開始繪制鞭呕。
CSS3?漸變(Gradients)
CSS3 漸變(gradients)可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。
以前宛官,你必須使用圖像來實現(xiàn)這些效果葫松。但是,通過使用 CSS3 漸變(gradients)底洗,你可以減少下載的事件和寬帶的使用腋么。此外,漸變效果的元素在放大時看起來效果更好亥揖,因為漸變(gradient)是由瀏覽器生成的珊擂。(我覺得性能優(yōu)化了)
線性漸變
從上到下圣勒、從左到右、對角
語法:background: linear-gradient(direction,?color-stop1,?color-stop2, ...);
使用角度
詳細見菜鳥教程:菜鳥教程Gradients
語法:background: linear-gradient(angle,?color-stop1,?color-stop2);
使用多個顏色結點
語法:background: linear-gradient(direction,?color-stop1,?color-stop2, ...);
使用透明度(transparent)
重復的線性漸變
repeating-linear-gradient() 函數(shù)用于重復線性漸變
徑向漸變
徑向漸變由它的中心定義摧扇。
設置形狀
shape 參數(shù)定義了形狀圣贸。它可以是值 circle 或 ellipse。其中扛稽,circle 表示圓形吁峻,ellipse 表示橢圓形。默認值是 ellipse在张。
不同尺寸大小關鍵字的使用
size 參數(shù)定義了漸變的大小用含。它可以是以下四個值:
closest-side
farthest-side
closest-corner
farthest-corner
重復的徑向漸變
repeating-radial-gradient() 函數(shù)用于重復徑向漸變