文本，字体，颜色
1. 新增颜色模式
rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
实例: 背景透明，文字不透明
问题：注意边框颜色透明有问题
实例: 背景透明，文字不透明
<style>
body{background:url(miaov.jpg);}
.box{width:200px;height:200px;background:rgba(0,0,0,0.5);color:#fff; font:40px/100px "微软雅黑";text-align:center;}
</style>
</head>
<body>
<divclass="box">妙味课堂</div>
</body>
实例: 文字透明
<style>
.box{width:200px;height:190px;background:url(miaov.jpg)no-repeat center; color:#fff; font:80px/90px "微软雅黑"; text-align:center; color:rgba(255,255,255,0.5);border:10pxsolid rgba(0,0,0,0.5);}
</style>
</head>
<body>
<divclass="box">妙味课堂</div>
</body>
边框透明，但有问题，边框会透明背后的图片
<style>
.box{width:200px;height:190px;background:url(miaov.jpg)no-repeat center; color:#fff; font:80px/90px "微软雅黑"; text-align:center;color:rgba(255,255,255,0.5);border:10px solid rgba(0,0,0,0.5);}
</style>
</head>
<body>
<divclass="box">妙味课堂</div>
</body>
2. 文字阴影
text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡
多层之间逗号隔开
<style>
h1{font:100px/200px "微软雅黑"; text-align:center; text-shadow:-5px -10px 1px red,5px 10px 2px green,1px 1px 5px yellow;}
</style>
</head>
<body>
<h1>妙味课堂</h1>
</body>
文字阴影应用
最简单用法
text-shadow:2px2px 4px black
阴影叠加
text-shadow:2px2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的
几个好玩的例子
层叠：color:red; font-size:100px;font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px#fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 080px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px#feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px#cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana,Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
应用1：文字模糊
<style>
h1{font:100px/200px "微软雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,1);border:1px solid #000; transition:1s;}
h1:hover{color:rgba(0,0,0,0);text-shadow:0 0 100px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<h1>妙味课堂</h1>
</body>
鼠标移上之前
之后
应用2：文字描边
-webkit-text-stroke:宽度颜色
<style>
h1{font:100px/200px "微软雅黑"; text-align:center; color:#000;-webkit-text-stroke:3pxred;}
</style>
</head>
<body>
<h1>妙味课堂</h1>
</body>
应用3文字排版
Direction 定义文字排列方式(全兼容)
Rtl从右向左排列
Ltr从右向左排列
注意要配合unicode-bidi 一块使用
<style>
p{width:300px;border:1pxsolid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
</style>
</head>
<body>
<p>妙味课堂</p>
</body>
应用4 超出省略号
Text-overflow定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
<style>
p{width:300px;border:1pxsolid #000;font:14px/30px "宋体"; white-space:nowrap;overflow:hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<p>妙味课堂具有人性化的IT培训机构妙味课堂具有人性化的IT培训机构</p>
</body>
