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 ).

#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}

2、椭圆

#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}

3、等边三角

#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}

4、五角星

#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}

5、爱心

#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}

6、倒三角

#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }