一冕碟、字體樣式縮寫(xiě)
font:文字粗細(xì) 大小/行高 字體名稱(chēng);
font: bold 100px/200px "微軟雅黑";
二、css3中的文字陰影
text-shadow:x y r color;
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff;
- 01x:表示陰影在水平方向的偏移量匆浙,可以設(shè)置成負(fù)值安寺,正負(fù)不表示大小,只表示方向答憔。水平向右為正雁佳,向左為負(fù)胶逢,單位是px
- 02y:表示陰影在垂直方向的偏移量,垂直向上為負(fù)迎捺,向下為正
- 03r:表示陰影的模糊程度,數(shù)值越大陰影越模糊查排,單位px
- 04color:表示陰影的顏色
- 05 :css3允許一段文字有多層陰影凳枝,多層之間用逗號(hào)隔開(kāi),每一層內(nèi)跋核,不同參數(shù)之間用空格隔開(kāi)
凹凸文字小例子
利用文字陰影的原理岖瑰,一面陰影是暗色的,一面的陰影是亮色的砂代,顏色相換锭环,就可以出來(lái)文字凹凸效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>凹凸文字</title>
</head>
<style type="text/css">
body{
background: #ccc;
}
div{
color: #ccc;
text-align: center;
font: bold 100px/200px "微軟雅黑";
text-shadow: 1px 1px 0px #fff ,-1px -1px 0px #333;#凸形字
#text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff; #凹形字
}
</style>
<body>
<div>
凹凸文字
</div>
</body>
</html>
凸形字
凹形字
三、過(guò)渡屬性
作用就是在元素的默認(rèn)樣式與最終樣式變化之間產(chǎn)生的一個(gè)過(guò)程泊藕,在css3中新增了一個(gè)屬性叫transition
transition: all 0s linear 0s;
注:
- 01 第一個(gè)參數(shù)的作用是設(shè)置元素身上的那些屬性產(chǎn)生過(guò)度辅辩,一般用all表示所有的屬性都過(guò)渡
- 02 第二個(gè)參數(shù)的作用設(shè)置過(guò)渡需要時(shí)長(zhǎng)难礼,單位是s,不能省略
- 03 第三個(gè)參數(shù)的作用設(shè)置過(guò)渡的動(dòng)畫(huà)形式玫锋,linear表示勻速
- 04 第四個(gè)參數(shù)設(shè)置當(dāng)前過(guò)渡等待多久之后才會(huì)執(zhí)行(延時(shí))蛾茉,即使為0,單位也不能省略
- 05 :hover 選擇某個(gè)元素被鼠標(biāo)移上時(shí)的狀態(tài)
- 06 transition 這個(gè)屬性既可以添加在元素默認(rèn)狀態(tài)撩鹿,也可以添加在鼠標(biāo)移上狀態(tài)谦炬,區(qū)別就是第二種做法在鼠標(biāo)離開(kāi)的時(shí)候不會(huì)再有過(guò)渡變化