CSS---CSS高级技巧---CSS三角、用户界面样式---7.27

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标(子绝父相)

div {
width:0;
height:0;
/*照顾低版本游览器*/
/*line-height:0;
font-size:0;*/
border: 50px solid transparent;
border-left-color: pink;
}

---

---

---

CSS用户界面样式

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

default：小白默认、pointer：小手、move：移动、text：文本、not-allowed：禁止

li {cursor:pointer;}
<li style="cursor: default;">默认的小白</li>

去除轮廓线outline

给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的(蓝色)边框。

input {outline:none;}

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽的。 

textarea {resize:none;}

---

vertical-align属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是只针对于行内元素或者行内块元素有效。

vertical-align：baseline（基线） | top（顶线） | middle（中线） | bottom（底线） ;

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。
此时可以给图片、表单这些行内块元素添加：vertical-align：middle；

解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加vertical-align：middle|top|bottom；等。（提倡使用的）
2.把图片转换为块级元素display：block；

---

溢出的文字省略号显示

1.单行文本溢出显示省略号：必须满足三个条件

/*1.先强制一行内显示文本*/
white-space:nowrap;(默认normal自动换行)
/*2.超出的部分隐藏*/
overflow:hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow:ellipsis;

2.多行文本溢出显示省略号（了解）：有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkitp内核)

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;