CSS學習(十)-CSS字體、CSS字體陰影


一、理論:
1.css字體類型
a.font-family 字體類型
b.font-style 字體樣式
c.font-weight 粗細,可設置數字
d.font-size-adjust 是否強制對文本使用同一尺寸
e.font-stretch 橫向拉伸變形字體
f.foont-variant 字體大小寫
2.css文本類型
a.word-spacing 詞間距
b.letter-spacing 字符間距
c.vertical-align 文本垂直對齊方式
d.text-decoration 文本修飾線
e.text-indent 文本首行縮進
f.text-align 文本水平對齊方式
g.line-height 文本行高
h.text-transform 文本大小寫
i.text-shadow 文本陰影大小
j.while-space 文字之間和文本之間的空白符間距
k.direction 文本流入方向 
3.text-shadow 文本陰影屬性
a.color 陰影顏色
b.x-offset X軸位移
c.y-offset Y軸位移 
d.blur-radius 陰影模糊半徑
e.IE濾鏡 filter:shadow

二、實踐:

1.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.text-wrap{
width: 600px;
margin: 10px auto;
padding: 10px 0;
border: 5px solid #289356;
position: relative;
box-shadow: 0 0 4px rgba(0,0,37,0.80);
clear: both;
font-family: Arial,Serif;
font-size: 50px;
text-align: center;
color: #f6f6f6;
}
.box1{
text-shadow:
0px 0px 0 rgb(188,178,188),
1px 0px 0 rgb(173,163,153),
2px 0px 0 rgb(156,138,126),
3px 0px 0 rgb(173,153,123),
4px 0px 0 rgb(126,116,136),
5px 0px 0 rgb(111,101,131),
6px 0px 0 rgb(195,185,175),
7px 0px 0 rgb(179,169,159),
8px 0px 7px rgb(0,0,0,0.35),
8px 0px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box2{
text-shadow:
0px 0px 0 rgb(188,178,188),
1px -1px 0 rgb(173,163,153),
2px -2px 0 rgb(156,138,126),
3px -3px 0 rgb(173,153,123),
4px -4px 0 rgb(126,116,136),
5px -5px 0 rgb(111,101,131),
6px -6px 0 rgb(195,185,175),
7px -7px 0 rgb(179,169,159),
8px -8px 7px rgb(0,0,0,0.35),
8px -8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box3{
text-shadow:
0px 0px 0 rgb(188,178,188),
0px -1px 0 rgb(173,163,153),
0px -2px 0 rgb(156,138,126),
0px -3px 0 rgb(173,153,123),
0px -4px 0 rgb(126,116,136),
0px -5px 0 rgb(111,101,131),
0px -6px 0 rgb(195,185,175),
0px -7px 0 rgb(179,169,159),
0px -8px 7px rgb(0,0,0,0.35),
0px -8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box4{
text-shadow:
0px 0px 0 rgb(188,178,188),
-1px -1px 0 rgb(173,163,153),
-2px -2px 0 rgb(156,138,126),
-3px -3px 0 rgb(173,153,123),
-4px -4px 0 rgb(126,116,136),
-5px -5px 0 rgb(111,101,131),
-6px -6px 0 rgb(195,185,175),
-7px -7px 0 rgb(179,169,159),
-8px -8px 7px rgb(0,0,0,0.35),
-8px -8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box5{
text-shadow:
0px 0px 0 rgb(188,178,188),
-1px 0px 0 rgb(173,163,153),
-2px 0px 0 rgb(156,138,126),
-3px 0px 0 rgb(173,153,123),
-4px 0px 0 rgb(126,116,136),
-5px 0px 0 rgb(111,101,131),
-6px 0px 0 rgb(195,185,175),
-7px 0px 0 rgb(179,169,159),
-8px 0px 7px rgb(0,0,0,0.35),
-8px 0px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box6{
text-shadow:
0px 0px 0 rgb(188,178,188),
-1px 1px 0 rgb(173,163,153),
-2px 2px 0 rgb(156,138,126),
-3px 3px 0 rgb(173,153,123),
-4px 4px 0 rgb(126,116,136),
-5px 5px 0 rgb(111,101,131),
-6px 6px 0 rgb(195,185,175),
-7px 7px 0 rgb(179,169,159),
-8px 8px 7px rgb(0,0,0,0.35),
-8px 8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box7{
text-shadow:
0px 0px 0 rgb(188,178,188),
0px 1px 0 rgb(173,163,153),
0px 2px 0 rgb(156,138,126),
0px 3px 0 rgb(173,153,123),
0px 4px 0 rgb(126,116,136),
0px 5px 0 rgb(111,101,131),
0px 6px 0 rgb(195,185,175),
0px 7px 0 rgb(179,169,159),
0px 8px 7px rgb(0,0,0,0.35),
0px 8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box8{
text-shadow:
0px 0px 0 rgb(188,178,188),
1px 1px 0 rgb(173,163,153),
2px 2px 0 rgb(156,138,126),
3px 3px 0 rgb(173,153,123),
4px 4px 0 rgb(126,116,136),
5px 5px 0 rgb(111,101,131),
6px 6px 0 rgb(195,185,175),
7px 7px 0 rgb(179,169,159),
8px 8px 7px rgb(0,0,0,0.35),
8px 8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
.box9{
text-shadow:
0px 0px 0 rgb(188,178,188),
1px 1px 0 rgb(173,163,153),
2px 2px 0 rgb(156,138,126),
3px 3px 0 rgb(173,153,123),
4px 4px 0 rgb(126,116,136),
5px 5px 0 rgb(111,101,131),
6px 6px 0 rgb(195,185,175),
7px 7px 0 rgb(179,169,159),
8px 8px 7px rgb(0,0,0,0.35),
8px 8px 1px rgb(0,0,0,0.5),
0px 0px 7px rgb(0,0,0,.2);
}
</style>
</head>
<body>
<div class="text-wrap box1">W3cplus (0 deg)</div>
<div class="text-wrap box2">W3cplus (45 deg)</div>
<div class="text-wrap box3">W3cplus (90 deg)</div>
<div class="text-wrap box4">W3cplus (135 deg)</div>
<div class="text-wrap box5">W3cplus (180 deg)</div>
<div class="text-wrap box6">W3cplus (225 deg)</div>
<div class="text-wrap box7">W3cplus (270 deg)</div>
<div class="text-wrap box8">W3cplus (315 deg)</div>
<div class="text-wrap box9">W3cplus (360 deg)</div>
</body>
</html>



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com