小黑路人 -- IT技术博客大学习 -- 共学习共进步！

• -webkit-margin-start 属性

假如元素一开始的外边距的宽度。大白话：其实就是设置 margin-left 的宽度> 语法 -webkit-margin-start: width; 参数 width 设置最开始外边距的宽度，目前来说也就是margin-left 的宽度。

关于SafariCSSRef中文手册仅仅只是对 -webkit 内核浏览器做测试，不对 -moz/-ms/-o 等内核浏览器测试； 1、请使用chrome或者Safari浏览相关demo； 2、中文手册所有属性前缀统一为 -webkit-*，其他非 -webkit前缀的请自行前往w3school学习。

• css3:背景属性background-origin/clip详解

css3中背景裁剪和背景原点在实际中应用的不多，起码我目前的情况就是这样，考虑到这两个属性的属性值都是一样，但是含义却不不太一样，因此，索性把他们都合并在一起来讲，那么就先这样吧。

• table-cell的手机应用场景

怎么让大小不固定，又有图片，又有文字的内容垂直居中在视觉窗口一直都是很头疼的问题，特别是在pc端中，不过在移动端可以使用display:table-cell 属性达到居中效果，但是有时候也达不到我们的目的，特别是在那种单色场景切换的情况下，配合fullpage插件那绝对是刚刚的。

• 再说iconfont和font-face

@face-font和iconfont又是一对搞基的季节，对于iconfont这个文字图标我们都有所耳闻，相信去看过iconfont.cn的都会有点熟悉，今天带来的这篇文章主要不是讲制作，我们聊别的。

• webapp网页调试工具Chrome Devtools

对于写webapp的同行也许会经常调试各种手机端的页面而拿出各种手中的设备，苹果、三星、华为、小米、联想等等这些牌子的机子不断的扫一扫，这样也许会很累，不妨来试试用最新的谷歌开发者工具它针对webapp而出的控制台，简单易用，而且主要是对这些移动设备的渲染都是一样的，不存在说你在pc调试一个样到了移动端又显示不一样，除非有一个原因：你的meta标签木有写对。

• 解决IOS点击链接触发的颜色块

在苹果手机浏览器点击一个a链接或者带有点击效果的链接的时候常常都出现高亮的提示颜色快，这相当于一个提醒，提醒用户你已经点击到这个按钮了，按钮反馈一个状态给用户，告知用户，但是有时候我们往往也不需要这样的功能。那么可以使用针对webkit写一个叫做tap-lighlight-color的属性值让其消失~

• css3文字阴影属性text-shadow

利用text-shadow我们可以构建很多不可思议的进类似3D的文字效果，还可以当做一个伪按钮。利用shadow中的值重复投影产生绚丽的效果，感觉像吃了炫迈一样。

• 引入css外部样式表

对于css的引入可能也是老生长谈的问题了，那就不说什么了，不过对于手机浏览器还是要适当增加以下版本号，以至于告诉浏览器这个css是否有改动过，那么最后还是回归到了优化上的问题来，高质量的前端优化确实需要长足的沉淀。

• css3中的几何图形shape研究

估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形，那么请前往百度百科，就算是我们用:after :before 这些伪元素来构造我们所需要的形状或者利用边框来曲线救国，但是对于代码来说还是太长了，有没有直接定义几何图形或者是多边形的属性。今天来说说 shape。

• 关于webapp中的文字单位的一些捣腾

相信很多在写手机webapp页面的时候都跟我会有同样的疑惑，字体到底该用什么单位，是px像素还是em单位或者是rem单位，这篇文字或多或少会给你点帮助，也许不多。最后我想说，在不大的团队里，在没有形成规范的时候，那么你就按照你对什么熟就用什么单位数值。

• css透明度的一些兼容测试

网站丢给了外包公司来弄，但是老外写css的时候似乎没有考虑到国内的浏览器市场，于是只用了opacity这个属性来写，当IE8-的浏览器访问的时候，浮动层就像一块大黑斑药膏贴在哪里。很显然，婀娜多姿的模特被黑色药膏挡住了，用户完全感觉不到药膏下的她是有多么秀色可餐，因此也没有点击“性趣”去点击这条新闻了。所以必须来修改，让婀娜多姿的图片有种朦胧美。

• css3：box-shadow边框阴影属性值详解

css3边框阴影效果其实用的最多的就是用来装饰盒子外的阴影效果，像花瓣列表就采用这种风格。说白了，box-shadow属性就是起到一个点缀边框效果的作用，让原本呆板的边框有了一丝丝区别，当然还有更加好玩的，等你去发掘。

• css3-animation制作逐帧动画

其实假如不拿浏览器的兼容性来说，用css3做一些高帅富浏览器支持的动画效果其实还是很不错的，这个animation就是一个很不错的css3动画属性，特别是那些单色调的图片来做逐帧动画比我们用gif做的动画占用的内存还要小，不过对于GPU渲染是否是一种负荷目前还没有去测试，假如你知道的话不妨说说哈。