2019-7-15 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、文字樣式中階
字體樣式
代碼格式：
font： 文字粗細 大小/行高 字體名稱；
例子：font: bold 200px/400px "微軟雅黑";
2.字體陰影
代碼格式：
text-shadow：x y r color；
注：x是為負數則陰影向左，整數向右，同理y正數向上，負數向下，r代表陰影模糊程度，數值月大則越模糊，其單位都是px，color為文字顏色。
例子：text-shadow: 10px 10px 0px red;
提示：允許一段文字有多層陰影，多層之間用逗號隔開，每一層內，不同參數用空格隔開。
凹凸字體 陰影巧用
原理：通過背景顏色以及不同于背景顏色的陰影打造凹凸字體效果
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凹凸文字</title>
<style type="text/css">
body{
background: #ccc;
}
div{
color: #ccc;
text-align: center;
font: bold 200px/400px "微軟雅黑";
/*text-shadow: 1px 1px 0px #fff;-1px -1px 0px #333;*/
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff;
}
</style>
</head>
<body>
<div >
凹凸文字
</div>
</body>
</html>
二、過渡屬性
過渡屬性的作用就是體現元素默認樣式與最終樣式變化的過程。
代碼格式：transition：all 1s linear 0s；
注：
第一個參數的作用是設置元素的哪些屬性過渡，all表示全部過渡，width代表屬性寬度過渡，其他不過渡，其他屬性也一樣。
的哥屬性設置過渡需要的時長，單位s不能省略。
第三個屬性設置過渡延遲多少秒執行，單位s不能省略。
hover 設置鼠標移到某一元素時狀態。
transition 這個屬性既可以添加在元素默認狀態，也可以添加在鼠標上移狀態即添加在hover標簽內，區別就是第二種做法在鼠標離開時候不會發生過渡變化。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>過渡屬性</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: green;
transition:all 1s linear 0s;
}
div:hover{
width: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="\">
</div>
</body>
</html>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。