1. Text-stroke（文字描边）
<!DOCTYPE html
>
<html lang
="zh-cn">
<head
>
<meta charset
="utf-8" />
<title
>文字描边
</title
>
<style
>
html
,body
{font
:bold
14px
/1.5 georgia
,simsun
,sans
-serif
;text
-align
:center
;}
p
{
-webkit
-text
-stroke
-width
:2px
;
-webkit
-text
-stroke
-color
:#ff0
;
}
</style
>
</head
>
<body
>
<body
>
<p
>我描了
2像素黄边
</p
>
</body
>
</html
>
2. ::first-letter（首字变大）
p
:first
-letter
{
color
: #ff0000
;
font
-size
:xx
-large
}
3. Gradient text（文字渐变）
h1
{
font
-size：
72px
;
background：
-webkit
-linear
-gradient（#eee，＃
333）
;
-webkit
-background
-clip：text
;
-webkit
-text
-fill
-color：transparent
;
}
4. Line-clamp限制在一个块元素显示的文本的行数。
需要结合：display: -webkit-box; 属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。overflow : hidden;
p
{
display
: -webkit
-box
;
-webkit
-box
-orient
: vertical
;
-webkit
-line
-clamp
: 4;
text
-overflow
: ellipsis
;
overflow
: hidden
;
word
-wrap
:break-word
;
word
-break:break-all
;
}
<p
> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。
relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性
进行偏移时不影响常规流中的任何元素。
absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，
</p
>
5. Column-count（ 把div元素中的文本划分成合适的列）
.newspaper
{
-moz
-column
-count
:3;
-webkit
-column
-count
:3;
column
-count
:3;
}
<p
><b
>注意
:</b
> Internet Explorer
9及更早
IE 版本浏览器不支持 column
-count 属性。
</p
>
<div
class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢
?我甚至可能改变这个世界。”
</div
>
6. html标签<wbr>
标签如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 元素来添加 Word Break Opportunity（单词换行时机）
<p
>
如果想学习
AJAX，那么您必须熟悉
XML<wbr
>Http
<wbr
>Request 对象。
</p
>
7. Object fit(对图片进行剪切，保留原始比例)
img
.a
{
width
: 200px
;
height
: 400px
;
object
-fit
: cover
;
}
9. Conic-gradient（圆锥梯度）
background
: conic
-gradient(red
, orange
, yellow
, green
, blue
);
使用场景
11. Counters（给li前加序号）
ol
{
margin
: 0;
padding
: 0 0 0 2em
;
list
-style
: none
;
counter
-reset
: item
;
}
li
:before
{
counter
-increment
: item
;
content
: counter(item
)".";
color
: #f00
;
}
</style
>
</head
>
<body
>
<ol
class="test">
<li
>Node
<ol
>
<li
>Node
<ol
>
<li
>Node
</li
>
<li
>Node
</li
>
<li
>Node
</li
>
</ol
>
</li
>
<li
>Node
</li
>
</ol
>
</li
>
<li
>Node
</li
>
<li
>Node
</li
>
</ol
>
12. Selection（使被选中的文本）
::selection
{
background
: #f3b70f
;
}
或者
::selection
{
color
: #f3b70f
;
}
参考链接
