yzbben的博客

一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways，在My CSS Wish List一文中，见到了个新鲜的CSS属性，就是题目中的box-flex，以前没有见过，顿生疑惑，不知是骡子还是马，于是习惯性谷歌之，真是不谷不知道，一谷吓一跳。倒不是该属性本身，而是此属性作为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布

原文  http://www.uizph.com/post-329.html主题 HTML写这篇文章是因为自己被rem这个坑绊过脚，因此特意去研究了下rem这个单位。简单阐述下px、em、rem之前的关系（其实网上很多，我这里稍微提一下）。先抛出一个问题：为什么要选择rem？px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所

display: -webkit-box;  使用flexbox 布局  -webkit-box-pack: center;  实现容器内容垂直居中  -webkit-box-align: center;  实现容器内的内容水平居中     -webkit-box-orient: vertical; 容器内的元素垂直排列   

在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的实现。所以直接在前端压缩图片，已经成了很多移动端图片上传的必备功能了。在移动端压缩图片并且

小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。css 代码:overflow:

解决办法：?123appearance:none; -moz-appearance:none;/* Firefox */ -webkit-appearance:none;/* Safari 和 Chrome */

1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=2091一、pointer-events:none是？pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开

之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。CSS代码在火狐浏览器中的写法和在谷歌浏

border-image摘要其实我[border-image属性]是用来给元素边框添加背景图像，在某些时候，利用这个 border-image 可以轻松绘制一些比较复杂的小部件。并且我是 border-image-source``border-image-slice``border-image-width``border-image-outset``border-image-repeat 

在网站中嵌入动画已成为近年来的一个设计趋势，许多公司都已开始转向并拥抱HTML5、CSS3和JavaScript这个技术“三人组”。尽管这些技术还不能制作一些非常复杂的动画（像flash所实现的），但是如果拥有好的想法及创造性思维，使用它们制作的即便是一些简单的动画也足以打动我们。 而且，随着CSS3技术的发展，CSS3动画日益流行。目前，WebKit浏览器已对CSS3动画支持得相当好。F