文字阴影
text-shadow:x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层,会很卡很卡很卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 100px;
text-align: center;
/*text-shadow: x y 模糊度 颜色;*/
/*text-shadow: 2px 2px 2px red;*/
text-shadow: 2px 2px 2px red,4px 4px 4px yellow,8px 8px 8px blue;
}
</style>
</head>
<body>
<p>通天塔</p>
</body>
</html>
文字描边
webkit-text-stroke:宽度 颜色
文字排列
direction 定义文字排列方式(全兼容)
rtl 从右向左排列
ltr 从左向右排列
注意要配合unicode-bidi:bidi-override; 一块使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 100px;
text-align: center;
-webkit-text-stroke:2px red;
unicode-bidi:bidi-override;
direction:rtl;
}
</style>
</head>
<body>
<p>通天塔</p>
</body>
</html>
省略号
/*单行文本省略号*/
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*多行文本省略号*/
多行省略不兼容IE,要想兼容必须用插架或者滤镜写法(自行百度)
p{
display:-webkit-box;
overflow:hidden;
word-break:break-all;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
-webkit-line-clamp:20;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
}
p{
display:-webkit-box;
overflow:hidden;
word-break:break-all;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
-webkit-line-clamp:7;/*想做省略号的行数*/
}
</style>
</head>
<body>
<div>
<p>吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖</p>
</div>
</body>
</html>
自定义字体类型
@font-face {
font-family:'二哈';
src: url(fonts/Fontin_Sans_R_45b.otf);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-size: 200px;
text-align: center;
font-family: 'fon_t';
}
@font-face {
font-family:'fon_t';
src: url(fon/Fontin_Sans_I_45b.otf);
}
</style>
</head>
<body>
<!--<div>坎坎坷坷扩</div>-->
<div>asdfghjk</div>
</body>
</html>
字体图标 icon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>-->
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.icon_t{
/*字体图标的本质就是字体 不过长的想一个图形*/
font-size: 200px;
text-align: center;
color: red;
}
.zanting{
font-size: 200px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="icon iconfont icon_t">&
<p class="icon iconfont icon-zanting zanting"></p>
</body>
</html>