文本
文本阴影
text-shadow:h-shadow v-shadow blur color; //水平偏移 垂直偏移 模糊度 颜色
文本轮廓
基本上浏览器不支持
text-outline:thickness blur color //宽度值 模糊度 颜色
换行
word-break:属性规定自动换行的处理方法
word-break:normal | break-all | keep-all; //默认换行规则 该换行的地方换行 半角空格,连字符换行
word-wrap:属性允许长单词或URL地址换行到下一行
word-wrap:normal | break-word //默认 裁切到下一行
新文本属性
text-align-last:属性规定如何对齐文本的最后一行
text-align-last:auto | left | right | center | justify | start | end | initial | inherit
text-overflow:属性规定当文本溢出包含元素时发生的事情
加上overflow:hidden;
text-overflow:clip | ellipsis | string //剪切 省略 自定义符号
@font-face
@font-face{
font-family:<YourWebFontName>; //字体名称
src:<source>[<format>][,<source>[<format>]]*; //字体存放路径,可多个 format帮助浏览器识别
[font-weight:<weight>];
[font-style:<style>];
}
字体格式:
.ttf
.otf
.woff
.eot
.svg
字体应用
image.png
获取特殊字体网站 https://www.fontsquirrel.com/tools/webfont-generator
多列 (Multi-column)
columns
优先考虑列数
columns:<'column-width'> || <'column-count'>; //每列的宽度 列数
column-width
column-width:<length> | auto;
column-count
column-count:<integer> | auto;
column-gap
如果不设置将与字体大小相同
column-gap:<length> | normal
column-rule
设置列与列之间的边框
column-rule:<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;
column-span
是否横跨所有列
column-span:none | all;
column-fill
所有列的高度是否统一(现在基本都不支持)
column-fill:auto | balance; //自适应 所有列的高度以其中最高的一列统一
column-break
换行
column-break-before:auto | always | avoid;
column-break-after:auto | always | avoid;
column-break-inside:auto | avoid;
