随笔分类 - CSS3原创
本类文章均为小编在学习CSS3和工作中的发现和自我总结。
摘要：1. 闲来无事时在网上看一些前辈的博客文章，自己尝试了一下。学习到最重要的一点就是box-shadow的叠加使用，受益非线。先上一下效果图： 其中有以下重要的几点： 1. 蜡烛底座的border-radius的水平圆角与垂直圆角设置，即 border-radius：左上水平 右上水平 右下水平 左下
阅读全文
摘要：当做混合开发时，总有各种意想不到的酷炫效果的需求等着你。不过这个还好，先备着方便以后用。 先上效果图： 总结一下：此效果的完成基于以下几个关键点： 1.DOM结构，为每个DIV设置旋转后，一次也会影响到内层的结构，也就意为越往内层旋转的角度越大。平分下来只需要给div设置一个36deg的旋转就OK了
阅读全文
摘要：当没有浏览器兼容性限制时，就大胆地使用transiton的3D效果吧，前端也要做不一样的烟火！ *常用的3D效果 rotateX/rotateY/rotateZ/rotate3dtranslateX/translateY/translateZ/translate3d 基础的效果属性就不多说，下面说一
阅读全文
摘要：1.通过hover，也是最常用的方式。此方法要求按钮与被控制元素必须有层级关系。（兼容低端浏览器常用） 2.通过：focus点击按钮显示，点击空白处隐藏。此方通同样需要按钮与被控制元素之间存在层级关系。（需用到CSS3选择器） 3.利用label的for属性绑定checkbox，此方法对按钮与盒子的
阅读全文
摘要：首先，大家都清楚，元素使用fixed之后，若不设置top与left则会相对于最近的使用定位的父元素，并位于父元素的原点位置设置top与left值时，则会相对于窗口定位。但无论如何，此时仍相对于窗口定位，在此不过多描述。 今天发现的是当某一元素使用transform属性后，其所有使用fixed定位的子
阅读全文
摘要：首先看一下完成后的效果，鼠标移入可改变为手指的效果。 在此就不加图标了 在IE8中需要将input透明后还不能完全达到效果，还需要将字体设大一些，撑开input，这是IE自带的兼容问题。
阅读全文
摘要：通过增加或删除 l-current、l-current-unit、l-arrow-complete来修改状态，l-process-4 为显示四个状态的进度条，可改变的数字有1、2、3、4。
阅读全文
摘要：本文均为项目实战经验，要求兼容至IE8，所以以下内容均为兼容代码，欢迎各位小伙伴批评指教。其实重构页面是一门学问，看似简单，却暗藏很多学问。实际项目中页面的重构有以下几点最基本需求： 1.需要使用合理的标签进行语义化； 2.可扩展性，在页面的某个标签内增加新的内容（文字或标签），不会对原有内容造成影
阅读全文
摘要：1.不等垂直条纹。 2.垂直条纹渐变 3.斜向条纹 4.
阅读全文
摘要：*首先要清楚的是，box-shadow的形状会随着border-radius变化。下面的例子可以证明： 效果： *而实现内圆角边框（外边框为直角）就可利用以上特性（box-shaodw填充outline和border之间的空白），代码如下： div1 效果： div2效果： 喜欢请推荐，转载请标明出
阅读全文
摘要：1.hsla或rgba实现半透明边框。 rgba在rgb的基础上增加了透明通道，就不详细说了，下面重点说下hsla： 说明： HSLA(H,S,L,A) HSLA(H,S,L,A) 取值： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：
阅读全文
摘要：最近在重构时遇到了select样式问题，并且需要在不影响语义化的情况下，兼容IE8。 经过一番的百度后始终没有找到合适的纯CSS解决方案，最后换了一下思路，大胆使用了属性hack； 在chrome和FF下隐藏默认样式，显示css自定义样式，在ie下隐藏自定义样式，显示默认样式。 DOM代码如下： C
阅读全文
摘要：前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公
阅读全文
摘要：html结构如上 方法1：display：table-cell + textalign:center 注：display:table-ceil会使元素变为内联元素 方法2：display:table-ceil + margin: 0 auto 方法3：定位+负的margin，css如下： 方法4：内
阅读全文
