Text of CSS3

Text of CSS3

text-shadow

text-shadow: 10px 10px 3px #000;

前两个值分别为阴影的水平和垂直偏移量，第三个值为模糊值，也可以多加几个阴影，用“,”隔开即可。

可以用text-shadow实现一个简单的浮雕效果：

color: #ddd;
text-shadow:1px 1px #000, -1px -1px #fff;

实现一个简单的火焰效果

div{
    position: absolute;
    width:700px;
    height: 10px;
    font-size: 80px;
    color: #ddd;
    text-shadow:0px 0px 10px #0f0,
                0px 0px 20px #0f0,
                0px 0px 30px #0f0;
}

div:hover{
    text-shadow:0px 0px 10px #f00,
                0px 0px 20px #f10,
                0px 0px 30px #f20;
}

div::before{
    content: "NO";
    opacity: 0;
    text-shadow:0px 0px 10px #f00,
                0px 0px 20px #f10,
                0px 0px 30px #f20;
}

div:hover::before{
    opacity: 1;
}

在鼠标没放上去时是这样的：

在鼠标放上去以后：

为了缩减代码量，火焰效果不是太明显，可再自行调试。

小BUG

在用background-clip方法用文字区域截取背景图片时，再调用text-shadow生成阴影时，阴影会产生在文字上方，解决办法就是让阴影变浅的同时再加上偏移量。

@font-face

下载外部字体包

@font-face{
    font-famliy:'abc';
    src:url();
}

div{
    font-famliy:'abc';
}

官方文档是出现了一个小错误的，不是TureTpe而是TureType

扩展知识：

浏览器是如何打开各种后缀名文件的：

通过MIME协议里面的映射去向操作系统请求接口。

word-wrap

normal

允许内容顶开或溢出指定的容器边界。

break-word

内容将在边界内换行，如果需要，单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

word-break

normal

默认的换行规则。依据各自语言的规则，允许在字间发生换行。

keep-all

对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal

break-all

对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。

break-word

与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrap的break-word值效果相同

white-space

normal

默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。

pre

原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果

nowrap

与normal值一致，不同的是会强制所有文本在同一行内显示。

pre-wrap

与pre值一致，不同的是文字超出边界时将自动换行。

pre-line

与normal值一致，但是会保留文本输入时的换行。

column

columns

设两个值，第一个值是每列的宽度，第二个是列数。

column-width

这个属性是最不准的，每列的宽度会在设置的值左右变化，类似于round平铺效果。

column-count

用整数值来定义列数，不允许负值。

column-gap

用长度值来定义列与列之间的间隙，不允许负值。

column-rule

column-rule-width

列与列之间的边框厚度。

column-rule-style

列与列之间的边框样式。

column-rule-color

列与列之间的边框颜色。

column-span

设置块级元素，当值为none时，相当于一个单列的小标题；当值为all时，贯穿所有列，相当于一个大标题。

column-fill

设置每列的高度：

值为auto时为自适应高度；值为balance时，向最高列统一。

column-break-before

这个不常用。

column-break-after

这个也不常用。

column-break-inside

这个基本用不到。