随笔分类 -  CSS3

摘要：由于现在主要接触移动端，不需要考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。在近期的一个项目中，根据设计需求，需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子：-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举，可遇到了问题。在Fireofx中显示正常，但在webkit内核下的浏览器中，如Chrome和Safari，图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点，如果图片上级元素含有overflow:hidden 阅读全文

摘要：CSS3 图形圆：Html代码#circle{width:140px;height:140px;background:red;-moz-border-radius:70px;-webkit-border-radius:70px;border-radius:70px;}正方形：Html代码#square{width:140px;height:140px;background:blue;}椭圆：Html代码#oval{width:200px;height:100px;background:purple;-moz-border-radius:100px/50px;-webkit-border-rad 阅读全文

摘要：CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Grad 阅读全文

摘要：CSS3 变形(Transformation)/* 该属性下所有的书写规则都需写这三个前缀*/-webkit-transform/-moz-transform/-o-transformrotate/* 元素逆时针旋转90度 */rotate(-90deg); Rotate(旋转)允许你通过传递一个度数值来转动一个对象。IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);scale/* 宽和高都会被放大双倍 */scale(2);/* 宽会是双 阅读全文