随笔分类 - CSS技巧
摘要：垂直居中是一个历史悠久的大问题，要做到兼容所有浏览器少不了要花点时间，网上也流传了很多解决方案，但没发现比我现在用的方案更完美，至少在我的项目是如此。项目中要用到垂直居中而碰到兼容性问题的，一般都是以下几种情况：1、换行文字垂直居中2、图片垂直居中以上都是在固定宽高的容器里垂直居中，不然的话margin，padding便可实现。解决垂直居中无非就从几个方面入手，利用行高等于容器高度，模拟表格单元格特性，定位，css3的display:box一、换行文字垂直居中方法1：结合表格单元格特性和定位来实现CSS代码：/*换行文字垂直居中*/.vc-font1{border:1px solid blac
阅读全文
摘要：换行文字垂直居中1换行文字垂直居中，兼容所有浏览器换行文字垂直居中2换行文字垂直居中，兼容所有浏览器固定宽高图片垂直居中1固定宽高图片垂直居中2图片自适应容器宽高垂直居中CSS3垂直居中 想居中就居中，爽啊！
阅读全文
摘要：IE6下position:fixed的Bug应该是个老问题。不过，今天在搞瀑布流插件写返回顶部按钮时(老是闪动)却花了我不少时间，之前也写过一篇文章解决过，但是是用到css表达式解决，而现在的需求是要在js中动态定位，所以之前的办法不是很合适。今天再来总结一下：方法一：纯css*html{height:100%;overflow:hidden;}*html body{height:100%;overflow:auto;}原理：你拖动的滚动条并不是拖动的整个页面，而仅是body的滚动条优点：视觉效果完美，代码量少，不耗性能缺点：不会触发onscroll事件(因为html没有滚动)，可能会影响一些
阅读全文
摘要：关于阴影这个效果，IE和W3C都有实现的代码，但效果却不统一(以W3C的效果为主)。W3C实现代码：box-shadow: 水平偏移 垂直偏移阴影模糊值阴影外延值 insert(是否内阴影);IE的阴影实现代码：progid:DXImageTransform.Microsoft.Shadow(color=颜色, direction=角度, strength=阴影强度);但IE的阴影看起来有点恶心，而且还不可以设置模糊值。可以点击这里查看所以，要想效果跟W3C的效果接近，可以利用IE滤镜的模糊效果达到IE的模糊效果实现代码：filter:progid:DXImageTransform.Micro
阅读全文
摘要：最近的项目都会接触CSS3，万恶的IE却不支持，搜索了一下，发现IE的滤镜挺管用，貌似W3C正在把滤镜标准化。今天先整理一下IE的滤镜效果(请用IE浏览)，明天在把CSS3对应的效果写上(请用Webkit内核浏览)。，如果读者还有其他更好的文章，希望能够分享一下，欢迎加入web前端交流群（75701468） 分享您我的经验.IE 滤镜W3C 滤镜 Alpha：设置透明层次. blur：创建高速度移动效果，即模糊效果. Chroma：制作专用颜色透明. DropShadow：创建对象的固定影子. FlipH：创建水平镜像图片. FlipV：创建垂直镜像图片. glow：加光辉在附近对象的边外.
阅读全文
摘要：1 @charset "utf-8"; 2 /* Css Reset For XHTML*/ 3 html{color:#000;background:#FFF} 4 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} 5 table{border-collapse:collapse;border-spacing:0} 6 fieldset,img{border:0} 7
阅读全文
