CSS深入剖析text和column

与box-shadow类似&＃xff0c;这里通过例子讲解。

1. 浮雕特效

div{font-size: 48px;color: #ddd;text-shadow: 1px 1px #000,-1px -1px #fff;
}


2. 镂雕特效

div{margin-top: 20px;font-size: 48px;color: #ddd;text-shadow: 1px 1px #fff,-1px -1px #000;
}


3. 转换特效

div{margin-top: 20px;font-size: 48px;color: #ddd;text-shadow: 0 0 5px #0f0,0 0 10px #0f0,0 0 15px #0f0;transition: all 0.8s;
}
div::before{content: "NO ";opacity: 0;transition: all 0.8s;
}
div:hover::before{opacity: 1;text-shadow: 0 0 5px #f10,0 0 10px #f20,0 0 15px #f30;
}
div:hover{text-shadow: 0 0 5px #f10,0 0 10px #f20,0 0 15px #f30;
}


4. 背景图移入

div:nth-child(4){width: 280px;height: 100px;line-height: 100px;margin-top: 20px;font-size: 64px;font-weight: bolder;letter-spacing: 5px;background-image: url(1.png);background-size: 100% 100%;background-repeat: no-repeat;background-position: -5px 300px;transition: all 0.5s;-webkit-background-clip: text;//webkit独有&＃xff0c;需要与text-fill&＃39;-color连用background-clip: text;//会将文字颜色转换成背景图片-webkit-text-fill-color: transparent;text-shadow: 1px 1px 5px rgba(10, 10, 10, 0.1);//当使用了阴影时文字阴影会在背景图片上层&＃xff0c;所以需要设置有名都才能看见背景移入
}
div:nth-child(4):hover{background-position: -5px 0px;
}

二、&＃64;font-face

需要兼容当前的主流浏览器&＃xff0c;需同时使用TureType(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
嵌入HTML文档的字体是指将OpenType字体&＃xff08;压缩的TrueType字体&＃xff09;文件映射到客户端系统&＃xff0c;用来提供HTML文档使用该字体&＃xff0c;或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。

&＃64;font-face {font-family: &＃39;diyfont&＃39;;src: url(&＃39;diyfont.eot&＃39;); /* IE9&＃43; */src: url(&＃39;diyfont.eot?#iefix&＃39;) format(&＃39;embedded-opentype&＃39;), /* IE6-IE8 */url(&＃39;diyfont.woff&＃39;) format(&＃39;woff&＃39;), /* chrome、firefox */url(&＃39;diyfont.ttf&＃39;) format(&＃39;truetype&＃39;), /* chrome、firefox、opera、Safari, Android, iOS 4.2&＃43;*/url(&＃39;diyfont.svg#fontname&＃39;) format(&＃39;svg&＃39;); /* iOS 4.1- *///format提示电脑这是一种一种字体的意思
}

三、其他text常用特性

1. white-space
   指定元素是否保留文本间的空格、换行&＃xff1b;指定文本超过边界时是否换行
   pre&＃xff1a;原封不动的保留你输入时的状态&＃xff0c;空格、换行都会保留&＃xff0c;并且当文字超出边界时不换行。等同 pre 元素效果。
   其他的较为少用
2. word-break
   定义元素内容文本的字间与字符间的换行行为
   normal&＃xff1a;默认的换行规则。依据各自语言的规则&＃xff0c;允许在字间发生换行。
   keep-all&＃xff1a;对于 CJK&＃xff08;中文&＃xff0c;韩文&＃xff0c;日文&＃xff09;文本不允许在字符内发生换行。Non-CJK 文本表现同normal
   break-all&＃xff1a;对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本&＃xff0c;比如使连续的英文字符断行。
   break-word&＃xff1a;与break-all相同&＃xff0c;不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrap的break-word值效果相同
3. word-spacing
   指定单词之间的额外间隙
   normal&＃xff1a;默认间隔。计算值为0
   length&＃xff1a;用长度值指定单词间隔。可以为负值。
   percentage&＃xff1a;用百分比指定单词间隔。可以为负值。&＃xff08;CSS3&＃xff09;
4. letter-spacing
   指定字符之间的额外间隙
   normal&＃xff1a;默认间隔。计算值为0
   length&＃xff1a;用长度值指定字符间隔。可以为负值。
5. text-indent
   定义块内文本内容的缩进&＃xff0c;一般2em

可用来渲染成小说的左右翻页功能。

1. column-width
   设置对象每列的宽度

div{width: 300px;height: 360px;border: 2px solid #000;column-width: 80px;//每列80px
}


但是页面缩放会影响布局&＃xff0c;不准确&＃xff08;尽量少用&＃xff09;。

2. column-count

div{width: 300px;height: 380px;border: 2px solid #000;column-count: 3;//显示3列
}


可用来设置瀑布流&＃xff0c;但是其内部计算规则是&＃xff1a;保持内容数目最多的列数最多
例&＃xff1a;

div{width: 300px;height: 300px;border: 2px solid #000;column-count: 3;
}
<div><img src&＃61;"1.png" alt&＃61;""><img src&＃61;"1.png" alt&＃61;"">
</div>


<div><img src&＃61;"1.png" alt&＃61;""><img src&＃61;"1.png" alt&＃61;""><img src&＃61;"1.png" alt&＃61;"">
</div>


3. column-gap
设置或检索对象的列与列之间的间隙
4. column-rule
设置或检索对象的列与列之间的边框
column-rule-width&＃xff1a;设置或检索对象的列与列之间的边框厚度。
column-rule-style&＃xff1a;设置或检索对象的列与列之间的边框样式。
column-rule-color&＃xff1a;设置或检索对象的列与列之间的边框颜色。

div{width: 300px;height: 380px;border: 2px solid #000;column-count: 3;column-rule: 1px solid #f0f;
}


5. column-span
   设置或检索对象元素是否横跨所有列
   可用来存放标题

column-span:all;


6. column-fill
   设置或检索对象所有列的高度是否统一
   auto&＃xff1a;列高度自适应内容
   balance&＃xff1a;所有列的高度以其中最高的一列统一
7. column-break-before/column-break-after
   设置或检索对象之前/之后是否断行
   auto&＃xff1a;既不强迫也不禁止在元素之前断行并产生新列
   always&＃xff1a;总是在元素之前断行并产生新列
   avoid&＃xff1a;避免在元素之前断行并产生新列
8. column-break-inside
   设置或检索对象内部是否断行