2）将 border 的值加大，并设为不同的颜色；
3）宽高均设为 0，剩下四个border，就变成。
4）想要哪个三角形，就保留哪个三角形的颜色，其他的都设置为透明。transparent 表示透明。将边框宽度设置为不同，就可以变换三角形的形状。
1）画圆角矩形；
2）画一个深色的三角形；
3）然后再画一个同样大小白色的三角形盖在它上面，两个三角形错位 2 个像素，这样深色三角形的边缘就刚好露出一个像素
a、normal： 连续的空白符会被合并，换行符会被当作空白符来处理。
b、nowrap： 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
c、pre： 连续的空白符会被保留。在遇到换行符或者 <br>元素时才会换行。
d、pre-wrap： 连续的空白符会被保留。在遇到换行符或者 <br>元素，或者需要为了填充「行框盒子( line boxes )」时才会换行。
e、pre-line： 连续的空白符会被合并。在遇到换行符或者 <br>元素，或者需要为了填充「行框盒子( line boxes )」时会换行。
f、break-spaces：
与pre-wrap的行为相同，除了：
任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
text-overflow 属性确定如何显示的溢出内容。它可以被剪切，显示一个省略号（'...'）或显示一个自定义字符串。
a、clip：此为默认值。在内容区域的极限处截断文本， 因此在字符的中间可能会发生截断。如果你的目标浏览器支持text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为text-overflow属性的值。
b、ellipsis：用一个省略号 ('…')来表示被截断的文本。 这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
c、<string>：用来表示被截断的文本。 字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。
- webkit-line-clamp 是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp 属性 可以把块容器中的内容限制为指定的行数。
它只有在display属性设置成 -webkit-box或者-webkit-inline-box并且-webkit-box-orient(en-US) 属性设置成vertical时才有效果
在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
1、在电脑上打开Css，然后准备一个空的html结构，在其中放置一个空的div。2、这时需要去除浏览器中一些特有的样式。
3、给这个样式一个宽高，并添加一个背景。
4、最后给样式添加border-radius属性，其值为宽或高的一半。
5、最后运行程序，这样就会在界面中看到一个圆形。
当div宽度为0，高度为0的时候，只设置border的大小和四边不同颜色可看到下图，只保留一边的颜色，另外三边的颜色设置为transparent可得到一个方向的三角形。因此，可延伸出设置一边的border的颜色，相邻两边的border设置为transparent可得到一个方向的三角形。
border的大小的值为三角形底边上的高，三角形的底为相邻两边的border的高的和，如下图所示的红色锐角三角形
若想实现直角三角形的效果，如下图所示直角在左上的三角形，按原理可设置上border和左border的颜色，另外两条边的颜色为transparent，此样式可简写为只设置上border的颜色，另一条相邻的右border为transparent
你也许会遇到要画个奇怪三角形的时候，只要参考锐角三角形的方式，找到三角形底边和高，计算出三角形高和把相邻两条边的高相加作为底部，你可以画出各种各样的三角形，如果再加上角度旋转的css，你便啥三角形都能画！
此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加，比如做如上图所示的边框为1px的红色边框白色底三角形，就先画一个红色三角形，再画一个尺寸少2px的白色底三角形，然后设置两个三角形的position将三角形重叠，这里使用伪元素实现
1、向上正箭头
2、向下正箭头
3、向左正箭头
4、向右正箭头
5、向左上箭头
6、向右上箭头
7、向左下箭头
8、向右下箭头
