css3文本新增属性

新增颜色模式

rgba
r	red	红	0-255
g	green	绿	0-255
b	blue	蓝	0-255
a	Alpha	透明	0-1

例子：背景透明，文字不透明

text-shadow 文字透明属性

text-shadow:第一个参数表示x轴的偏移量第二个参数表示y轴的偏移量第三个参数表示模糊程度第四个参数表示阴影颜色

阴影效果可以多层叠加，中间用,隔开

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p{
			font；100px/200px "微软雅黑"；
			text-align: center;
			text-shadow: -5px -10px 1px red,5px 10px 1px green;
		}
	</style>
</head>
<body>
	<p>北京邮电</p>

</body>
</html>

例子：层叠

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p{
			color: red;
			font-size: 100px;
			font-weight: bold;
			text-shadow: 2px 2px 0px white,4px 4px 0px red;
			
		}
	</style>
</head>
<body>
	<p>北京邮电</p>

</body>
</html>

例子：光晕

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        color: white;
        font-size: 100px;

        text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    </style>
</head>

<body>
    <p>北京邮电</p>
</body>

</html>

例子：火焰文字

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        color: white;
        font-size: 100px;

        text-shadow: 0px 0px 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;
    }
    </style>
</head>

<body>
    <p>北京邮电</p>
</body>

</html>

例子：模糊效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		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>
</html>

文字描边

只有webkit内核的浏览器才支持。-webkit-text-stroke:宽度颜色；

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    h1 {
        font: 100px/200px "微软雅黑";
        text-align: center;
        color: #000;
        -webkit-text-stroke: 3px red;
    }
    </style>
</head>

<body>
    <h1>北京邮电</h1>
</body>

</html>

文字排版

direction 定义文字排列方式

Rtl 从右到左排列

ltr 从左到右排列

注意要配合unicode-bili一块使用

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        width: 300px;
        border: 1px solid #000;
        font: 14px/30px "宋体";
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    </style>
</head>

<body>
    <p>北京邮电</p>
</body>

</html>

文本省略

text-overflow定义省略文本的处理方式

clip 无省略号

ellipsis 省略号

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        width: 300px;
        border: 1px solid #000;
        font: 14px/30px "宋体";
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>

<body>
    <p>简称北邮，是中华人民共和国教育部直属，工业和信息化部共建的一所以信息科技为特色，工学门类为主体，管理学、文学、理学等多个学科门类协调发展的全国重点大学</p>
</body>

</html>

自定义文字

工具：asia font studio4

格式：

@font-face{

font-family:’isabelle’;

src:url(‘111-webfont.eot’);

src:url(‘111-webfont.eot?#iefix’)format(‘embedded-opentype’),

url(‘111-webfont.woff’)format(‘woff’),

url(‘111-webfont.ttf’)format(‘truetype’),

url(‘111-webfont.svg#untitledregular’)format(‘svg’);

font-weight:normal;

font-style:normal;

}

转换字体格式生成兼容代码：

http://www.fontsquirrel.com/fontface/generator