背景樣式
背景原點：background-origin ：
border-box（從border區域（含border）開始顯示背景圖像。）
padding-box（從padding區域（含padding）開始顯示背景圖像。）
content-box（從content區域開始顯示背景圖像。）
<style type="text/css"> .box{ width: 250px; height: 250px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_01.jpg) no-repeat; border:10px dashed red; background-origin: border-box; } .box2{ width: 250px; height: 250px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_01.jpg) no-repeat; border:10px dashed red; background-origin: padding-box; } .box3{ width: 250px; height: 250px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_01.jpg) no-repeat; border:10px dashed red; background-origin: content-box; }
</style>
<body>
<div class="box"><p>從border區域（含border）開始顯示背景圖像。<p></div>
<div class="box2"><p>從padding區域（含padding）開始顯示背景圖像。<p></div>
<div class="box3"><p>從content區域開始顯示背景圖像。<p></div>
</body>
效果如下：
背景的顯示區域
設定背景圖像向外裁剪的區域。
background-clip ：
padding-box：從padding區域（不含padding）開始向外裁剪背景。
border-box：從border區域（不含border）開始向外裁剪背景。
content-box：從content區域開始向外裁剪背景。
text：從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果。
<style type="text/css"> .box{ width: 200px; height: 200px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_02.jpg) no-repeat; border:10px dashed red; background-clip: border-box; } .box2{ width: 200px; height: 200px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_02.jpg) no-repeat; border:10px dashed red; background-clip: padding-box; } .box3{ width: 200px; height: 200px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_02.jpg) no-repeat; border:10px dashed red; background-clip: content-box; } .box4{ width: 200px; height: 200px; float: left; margin-left: 20px; padding: 20px; background:#aaa url(zzfw_02.jpg) no-repeat; border:10px dashed red; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:bold; font-size:30px; } p{ margin-top: 150px; font-size: 20px; color: #fff; font-weight: bold; } </style> <body> <div class="box"><p>從border區域（不含border）開始向外裁剪背景。<p></div> <div class="box2"><p>從padding區域（不含padding）開始向外裁剪背景。</p></div> <div class="box3"><p>從content區域開始向外裁剪背景。</p></div> <div class="box4">從前景內容的形狀（比如文字）作為裁剪區域向外裁剪</div> </body>
效果如下：
背景尺寸
background-size:
div{background-size:100px 150px;} /*調背景圖片的大小*/
多重背景
注意：
用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），
表明 所有背景圖片應用該屬性值。
background-color 只能設置一個。
.box{ width: 500px; height: 250px; background: url(05.jpg) no-repeat 367px 131px,url(04.jpg) no-repeat 142px 52px,url(03.jpg) no-repeat 78px 86px,url(01.jpg) no-repeat 14px 65px,url(02.jpg) no-repeat 60px 25px; }
多個背景圖片效果如下：
列表樣式
項目符號：
list-style-type :
取值：
disc：實心圓
circle：空心圓
square：實心方塊
decimal：阿拉伯數字
lower-roman：小寫羅馬數字
upper-roman：大寫羅馬數字
lower-alpha：小寫英文字母
upper-alpha：大寫英文字母
none：不使用項目符號
armenian：傳統的亞美尼亞數字
cjk-ideographic：淺白的表意數字
georgian：傳統的喬治數字
lower-greek：基本的希臘小寫字母
hebrew：傳統的希伯萊數字
hiragana：日文平假名字符
hiragana-iroha：日文平假名序號
katakana：日文片假名字符
katakana-iroha：日文片假名序號
lower-latin：小寫拉丁字母
upper-latin：大寫拉丁字母
常用的有：
.disc{list-style-type:disc;}
.circle{list-style-type:circle;}
.square{list-style-type:square;}
.decimal{list-style-type:decimal;}
.lower-alpha{list-style-type:lower-alpha;}
.upper-alpha{list-style-type:upper-alpha;}
.none{list-style-type:none;}
效果如下：
list-style-position：
取值：
outside：列表項目標記放置在文本以外，且環繞文本不根據標記對齊
inside：列表項目標記放置在文本以內，且環繞文本根據標記對齊
.outside{width:120px;list-style-position:outside;}
.inside{width:120px;list-style-position:inside;}
效果如下：
自定義項目符號
語法：list-style-image : none | url ( url )
.div{list-style-image:url(skin/ico.png);}
效果如下：
變形樣式
transform
1. translate()：指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
/*從原始位置移動到x軸200px的位置，y軸200px我位置 */ div { width: 100p x; height: 100px; border: 10px solid red; background-color: #808080; transform: translate(200px, 200px); }
2. translateX()
/*移動x軸，指定對象X軸（垂直方向）的平移 、從原始位置移動向x軸200px的位置，y軸同原來的y軸系數一樣*/ div { width: 100p x; height: 100px; border: 10px solid red; background-color: #808080; transform: translateX(200px); }
3. translateY()
/*移動y軸，指定對象X軸（水平方向）的平移 、從原始位置移動向y軸250px的位置*/ div { width: 100p x; height: 100px; border: 10px solid red; background-color: #808080; transform: translateY(250px); }
4. rotate()：（2D旋轉）
/*旋轉15度*/
.circle-box { width: 100px; height: 100px; border-radius: 10px; margin: 50px 0 0 50px; background-color: #808080; transform: rotate(15deg); }
效果如下：
5. scale()
/*按原來的大小的x軸放大1.1倍，y軸按原來的放大2.2倍*/ /*整數就相當於放大，負數的就相當於縮小*/ .box{ transform: scale(1.1, 2.2); }
6. skew()：（斜切扭曲）
/*第一個參數對應X軸=40ded，第二個參數對應Y軸=10deg。如果第二個參數未提供，則默認值為0 */
.box { transform: skew(40deg, 10deg); }
效果如下：
7. translate3d()：
指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
9. transform-origin
任何一個元素都有一個中心點，默認情況之下，其中心點是居於元素X軸和Y軸的50%處。
#div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate(45deg); transform-origin:50% 0%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:50% 0%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin:50% 0%; /* Safari and Chrome */ }
效果如下：
過渡動畫
transition-property(過渡屬性)
transition-property: all (代表所有屬性,稱為全局屬性)
div { width:100px; height:100px; background:red; transition-property: width; /*過度屬性是寬度width*/ transition-duration: 2s; /*過渡所需時間*/ -webkit-transition-property: width; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ } div:hover { width:300px; }
效果如下：
鼠標未移上之前： 鼠標移上之后增加寬度300px的所需時間為2秒速度過渡的效果：
transition-duration(過渡所需時間)：
div{ transition-duration: .5s;/*過度所需要的時間為0.5秒*/ }
transition-timing-function(動畫--過渡函數) :
參數說明：
ease:默認值，逐漸變慢(cubic-bezier(0.25,0.1,0.25,1))
linear:勻速過渡效果(等於 cubic-bezier(0,0,1,1))
ease-in:加速的過渡效果(等於 cubic-bezier(0.42,0,1,1))
ease-out:減速的過渡效果(等於 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后減速(等於cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。(動畫速度自定義)
div{ transition-timing-function:linear; /*勻速過度*/ transition-timing-function:ease; /*默認值，逐漸變慢*/ transition-timing-function:ease-in; /*由慢到快*/ transition-timing-function:ease-out; /* 由快到慢*/ transition-timing-function:ease-in-out; /*由慢到快再到慢*/ }
transition-delay(動畫--過渡延遲時間)：
div { transition-delay:.1s; /*延遲0.1秒再執行*/ }
transition(過渡)
可以將以上四個transition的屬性值縮寫：
div{ -webkit-transition: all .5s ease-in .1s; transition: all .5s ease-in .1s; /* 全局屬性all、過度所需的時間是0.5秒、加速的過渡效果ease-in、延遲0.1秒*/ }