text-shadow:x y blur color
浮雕效果:text-shadow:1px 1px #000, -1px -1px #fff;
镂刻效果:text-shadow:-1px -1px #000, 1px 1px #fff;
酷炫效果:text-shadow:0px 0px 10px #f0f,
0px 0px 20px #f0f;
一旦用了-webkit-background-clip:text;用文字剪切之后,文字就变成了背景的一部分
描边效果:-webkit-text-stroke:2px green;
@font-face{ 可以处理特殊符号
font-family:
src:url( );
} 帮助我们下载字体包,然后辅助我们处理字体样式的
字体格式:truetype 微软和苹果研发的 .ttf(扩展名)
opentype 微软+abode .opt
woff .woff
浏览器能够识别这个文件并且请求浏览器帮助它打开这个文件,来源于MIME协议。
MIME互联网邮件扩展协议:用来打开一些 . 后缀的协议(.ttf .text .pdf … ),跟操作系统发送请求把文件打开,浏览器会根据MIME里面写的一些东西,然后请求操作系统给予支持;MIME其实就是一个字段和和映射的关系。
协议在浏览器中是实时的吗?
协议在浏览器中不是实时的,它是内置的。比如:ie4保存的就是那个时代的MIME协议,那个时代的MIME协议肯定不全,ie+、火狐,每个阶段的MIME都不全,所以存在一个问题,在过去MIME协议里面,是不存在一些.ttf.woff等,协议中没有这些后缀,意味着你给浏览器一个地址,它不认识就会报错。MIME协议那时候没有更新到位,假设浏览器有那些后缀文件的话,现在先解决一个问题,怎么让浏览器认识这些字体呢?还有就是浏览器有些格式他不支持?我们有一个方法就是format()字体格式提示器。
white-space:pre; (保留格式,有空格、换行、有会在页面中显示);normal(默认的换行规格)
word-break:keep-all;不换行;break-word;尽可能保留英文的完整性;
test-align-last:justify;文字两端对齐
滑动鼠标文字不选中:unselectable为IE准备、
onselectstart为Chrome、Safari准备、
-moz-user-select是FF的
屏蔽选择的样式定义:-moz-user-select属性(只支持ff)。
属性有三个属性值:
1、 none:用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。
2、 -moz-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。
3、 -moz-none:子元素所有的文字都不能选择,但是input输入框中的文字除外。
css style:html,body{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}**
多列:
columns:两个属性 300px 4—-宽300 四列
column-count:4 —4列
column-gap:300px — 空隙
column-rule:1px solid black 空隙之间的线
column-span:all;贯穿一整行列
-webkit-column-break-before:always;在元素之前断裂,产生新列
column-width:300px;设置的时候父级要不变。一般使用column-count