文本陰影
text-shadow: x軸的偏移量 y軸的偏移量 模糊距離 陰影顏色(x正方向向右,y正方向向下)
text-shadow: 10px 10px 10px black;
( -webkit-瀏覽器類型前綴)
文字的描邊
text-stroke:文本描邊的寬度 顏色*/
背景顏色
background-color: red;
背景圖片
(優先級高於背景顏色)(url:地址)
background-image: url("../../img/f3_Android1.png");
背景圖片的遍歷方式
no-repeat:不重複
repeat-x:只在x軸方向遍歷(x軸方向重複)
repeat-y:只在y方向遍歷(y軸方向重複)
background-size:背景圖片的大小
contain:圖片的寬高比例不變,直到較小的方向填滿,才停止縮放(圖片永遠不會溢出)
cover:圖片的寬高比例不變,直到較大的方向填滿,才停止縮放(圖片基本上都會溢出)
固定的大小:x軸的寬度 y軸的高度
百分比大小(用的較多):x軸的寬度百分比 y軸高度的百分比
雪碧圖
很多小的圖形在同一個圖片上,用到哪個位置就移動哪個
background-position: -82px 0px;
列表
(列表樣式,none取消)
list-style: none;
(浮動,讓列表橫向顯示,left左對齊)
float: left;
超鏈接的狀態
<style>
/*順序不能亂 LVHA*/
Link鏈接
a:link{
color: black;
}
Visited瀏覽以後
a:visited{
color: darkgrey;
}
Hover設置當鼠標懸停時的樣式
a:hover{
color: yellow;
}
Active按下鼠標的樣式
a:active{
color: red;
}
</style>
圖片鏈接
<a href="http://www.baidu.com">
<img src="../../img/f3_Android1.png" alt="">
</a>
title屬性:當鼠標懸浮在元素上方時,顯示title屬性