css日常笔记

透明

• 非ie浏览器透明属性：opacity:0.3;
• 兼容ie浏览器透明属性：filter:Alpha(opacity=0.3);

禁用新属性：

• pointer-event:none; css3属性， ie11+才支持
  说明：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
  使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。

background属性

background:#ccc url(../../.....) top left repeat-x;
/* 注意url() 里面不需要加 ""  */

多有可以设置的值。建议多实用复合类似这样的，而不是一个个的单独使用某一个属性。
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

css滚动条样式设置：

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

注意：
该特性是非标准的，请尽量不要在生产环境中使用它！
只有webkit浏览器支持，ie浏览器是不支持的

将图片转换成base64，优化加载速度

背景图片，一律使用css的background属性，不要使用img标签

加载图片的标签 <image> 与 <img> 标签

<image>该特性是非标准的，请尽量不要在生产环境中使用它！
使用 <img> 代替

border-color

border-color:red green blue pink;/* 上 右 下 左 。支持透明：transparent*/
border-color:red green blue;
border-color:tarnsparent transparent #ccc;/*上、左右都是透明，只有下面是#ccc。默认边框颜色都是transparent透明*/
border-color:dotted red green;/*上边框和下边框是红色右边框和左边框是绿色*/
border-color:red;