CSS三角做法、用户界面样式。。。。

三角形做法
一个盒子无大小，未指定高，如果给这个盒子添加边框，并且为每一边框指定不同的颜色。

显示如图：

边框本质为三角形，将其他三个边转换为透明色，则是独立的一个三角形。
边框的粗细可以调节三角形的大小

这里的line-height与font-size是为了照护浏览器的兼容性。

鼠标样式
当鼠标移动到盒子上时，可以更改鼠标样式。
{cursor:default;}默认样式。
{cursor:pointer;}小手
{cursor:move;}移动
{cursor:text;}文本
{cursor:not-allowed;}禁止

取消表单轮廓和防止拖拽文本区
outline属性。
当我们使用input表单时，例如<input type="text">选中时会出现边框轮廓，我们可以更改outline属性来取消轮廓{outline:none;}。
resize属性。
文本域可以调整大小，将resize属性更改为none，可将文本域的大小定死。
{resize:none;}

vertical-align属性应用
经常用于设置图片或表单(行内块元素)和文字垂直对齐。
只对行内元素和行内块元素有效。
vertical-align:baseline | top | middle | bottom
baseline:默认元素放在父元素的基线上。
top:把元素顶端与行中最高元素顶端对齐。
middle：把元素放在父元素中间位置。
bottom：把元素顶端与行中最低元素的顶端对齐。

图片底侧空白缝隙解决方案。
问题：为装入一张图片的盒子添加边框时，图片的底侧不会与边框紧贴，而是出现一道空白间隙。如图所示：

图片是与基线对齐，而边框则是与底线对齐，所以在底部，边框会与图片产生一道空白缝隙。只要我们将图片进行底线对齐，那么就不会产生空白缝隙了。
给图片的vertical-align属性更改为bottom（只要不是基线对齐）。
或者将图片转换为块级元素display:block;(只有行内元素或者行内块元素采用vertical-align属性)。

将溢出的文字用省略号显示
1.单行文本溢出显示省略号
三个条件：
强制一行内显示文字white-space:nowrap;(默认normal自动换行)、超出的部分隐藏overflow:hidden;、文字用省略号代替超出的部分
text-overflow:ellipsis;。
2.多行文本溢出显示省略号
有兼容性问题，适用于webKit或移动端有较大的兼容性问题。