CSS进阶（21）—— CSS中的装饰属性和用户体验属性

本章主要来聊聊CSS中一些杂七杂八的属性，我的会将里面的坑提取出来测试一遍加深下印象，比较符合常规的属性这里就不赘述了。

1.不同凡响的background-position属性

background-position属性支持数值，百分比，关键字。固然你也能够混用关键字和数值，如:background-position:right 40px bottom 20px;表示距离右边缘40像素，距离底边缘20像素。background-position的不一样之处在于其百分比计算值有其特殊的计算公式，具体计算公式以下

positionX = （容器的宽度 - 图片的宽度）* percentX

positionY = （容器的高度 - 图片的高度）* percentY

为何CSS要给background单独设置一个这么奇怪的计算方式？不防来思考一下，咱们最爱用的100%值，若是你给background-position设置了100% 100%，若是按照正常的计算方式，那么这张背景图他就消失了，然而实际状况是这张背景图被固定到了容器右下角，所以这个计算方式是有必定好处的，只是在使用的时候须要注意一下。

2.被嫌弃又十分重要的outline属性

outline表示元素的轮廓，语法和border属性相似，如:outline:1px solid #cccc;

outline是一个和用户体验密切相关的属性，与focus状态以及键盘访问密切相关。在桌面端网页，咱们能够经过鼠标点击来完成通常的访问操做，然而这世上存在鼠标没电的状况，还存在不须要鼠标的设备，好比如今愈来愈普及的智能电视，就是用遥控器来操做的（别跟我说你家电视是触屏的，gun！）。这个时候，用户就须要知道本身focus了哪一个元素，若是没有outline辅助属性，你可能须要经过border去模拟focus状态，然而浏览器自带的功能为何还要费尽心思本身去模拟呢？

了解了outline的重要性后，之后在CSS重置的时候必定要避免重置outline，这样的错误会形成部分场景的用户使用障碍。

{
    outline:none; //千万不要这样作！
}
复制代码

outline属性除了和focus有较深的羁绊以外，还在别的地方大有用武之地。这里就不得不提outline的另外一个特殊属性了，outline拥有不占据任何空间的属性。 借助这个属性，咱们能够实现一些比较棘手的问题。

案例1：头像裁剪的矩形镂空效果

要实现这种中间镂空透明、四周蒙层遮罩的效果，就能够借助outline属性。核心CSS以下

<style>
.father{
     overflow: hidden;
}
.son{
     width: 80px;
     height: 80px;
     outline: 9999px solid rgba(0,0,0,0.5);
     cursor: move;
}
 </style>
复制代码

3.光标属性cursor

cursor属性决定了鼠标移入元素时，鼠标的样式，咱们用的最多的就是cursor：pointer，把鼠标移入区域变成可点击效果。除此以外，cursor还有不少好用的关键字，这里作个记录方便查阅。

（1）cursor：auto 默认值。auto表示光标形状根据标签类型自动进行处理。如button标签鼠标移入cursor:auto被处理成default，注意不是pointer，带href属性的连接表现为pointer。所以目前Web页面的按钮使用pointer手型的作法并不标准，连接才是手型。

（2）cursor：default。系统默认光标形状.

（3）cursor：none。这个声明就是让光标隐藏不见的意思，什么状况下咱们不须要鼠标呢？没错，你看视频全屏的时候，若是网站的用户体验作得好的话就会自动隐藏鼠标。

（4）cursor：pointer。光标表现为一只伸出食指的手，通常用于可点击的元素。

（5）cursor：help。光标头上带了个问号,通常用于帮助文档。

（6）cursor：progress。打开部分软件的时候鼠标旁边就会出现个转呀转的符号，表示数据正在加载中。

（7）cursor:wait。这个符号通常在系统死机的时候会出现，相似尽可能不要使用，以避免引发没必要要的恐慌。

（8）cursor:text。表示文字可被选中。

（9）cursor：vertical-text。表示文字可被垂直选中相似

（10）cursor：crossshair。十字光标，相似画图里的取色工具。

（11）cursor：cell。空心十字光标，excel软件里常常能见到他。

（12）cursor：move。带箭头的十字光标，通常表示当前元素可拖拽。

（13）cursor：grab。光标是一个五指张开的手，通常用于元素可被选取。

（13）cursor：grabbing。光标是一个五指收拢的手，通常表示选取了元素。

（14）cursor：zoom-in。光标形似放大镜。

（15）cursor：zoom-out。光标形似缩小镜。

（16）cursor：not-allowed。光标表示禁止，通常表示按钮禁用。

.........................（懒得抄了）

除了以上几种经常使用的以外，cursor还支持自定义图标。使用方法以下：cursor：url（example.png）。预览效果以下：

本文的光标图片建议看我原来那篇文章。

文章连接

不忘初心，方得始终

喜欢博主的童鞋能够扫描二维码加博主好友~ 也能够扫中间二维码入驻博主的粉丝群（708637831）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。