随笔分类 -  css

IE浏览器样式表限制
摘要：原文链接：http://caibaojian.com/ie-stylesheet.html 在开发头条上发现的IE浏览器样式限制，算是一个IE浏览器的一个bug吧。主要有4点限制： IE10则改善了一些： 话说微软Windows 10都有新的浏览器了，名字叫Microsoft Edge浏览器，而我现 阅读全文
posted @ 2016-08-12 08:56 白水螺丝 阅读(166) 评论(0) 推荐(0)
css3 transform IE 滤镜转换
摘要：低版本的IE浏览器无法支持transform css3属性。但是IE浏览器提供了很多滤镜。下面这个网站能让大部分css3样式转换成滤镜。 http://www.useragentman.com/IETransformsTranslator/ 阅读全文
posted @ 2016-03-29 17:30 白水螺丝 阅读(206) 评论(0) 推荐(0)
让IE6/IE7/IE8浏览器支持CSS3属性
摘要：一、下载 您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。 二、上面的是什么东西 首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它 阅读全文
posted @ 2016-02-26 14:08 白水螺丝 阅读(174) 评论(0) 推荐(0)
CSS居中完全解决方案
摘要：水平居中 行内元素 把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式 a{ text-align: center; } 块级元素 对于定宽的块级元素，我们要设置起margin-top,margin-right 为auto .center{ margin: 0 auto; } 多个块级元素(i 阅读全文
posted @ 2016-02-26 09:53 白水螺丝 阅读(220) 评论(0) 推荐(0)
解决input宽度设置成100%与padding的冲突
摘要：一、问题描述 我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。 如下效果图： 在窄屏下，上面的文本框宽度也要跟着外部宽度变小。 难点 对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。因此，我们基本上都有类似下面的设置： input { padding-left: 10 阅读全文
posted @ 2016-02-26 09:12 白水螺丝 阅读(2770) 评论(0) 推荐(1)
zless轻量级样式框架
摘要：主页的地址为：http://www.aibusy.com/zLess/ 阅读全文
posted @ 2016-02-25 08:41 白水螺丝 阅读(242) 评论(0) 推荐(0)
display:table-cell自适应布局下连续单词字符换行
摘要：一、过年回家，快刀乱麻，直入主题 之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局（都藏在长长文章之中）。这里开篇再次提一下，希望能将该技术普及下去。 典型的双栏布局类名使用如下： fix l cell 该类名去来自我自己整的CSS基本样式库 – zxx.l 阅读全文
posted @ 2016-02-03 14:50 白水螺丝 阅读(373) 评论(0) 推荐(0)
Transform-style和Perspective属性
摘要：在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用，其实在transform属性中，transform-origin属性仅是其中之一，要彻底理解transform属性，这是不够的，必须的... 阅读全文
posted @ 2016-01-25 10:35 白水螺丝 阅读(732) 评论(0) 推荐(0)
CSS3 Transform——transform-origin
摘要：在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变... 阅读全文
posted @ 2016-01-25 10:33 白水螺丝 阅读(1128) 评论(0) 推荐(0)
CSS3 3D Transform
摘要：作为一个网页设计师，你可能熟悉在二维空间工作，但是在三维空间上工作并不太熟悉。使用二维变形我们能够改变元素在水平和垂直轴线，然而还有一个轴沿着它，我们可以改变元素。使用三维变形，我们可以改变元素在Z轴位置。 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功... 阅读全文
posted @ 2016-01-25 10:27 白水螺丝 阅读(226) 评论(0) 推荐(0)
CSS3 2D Transform
摘要：在一个二维或三维空间，元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴，也就是大家常说的水平轴和垂直轴；而3D变形工作在X轴和Y 轴之外，还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度，还有深度。我们将首先讨论元素在2D平面如何变换，然后我们在进入3D变换的讨论。CSS3 2D变换... 阅读全文
posted @ 2016-01-25 10:21 白水螺丝 阅读(252) 评论(0) 推荐(0)
CSS content内容生成技术以及应用
摘要：一、简介content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持：(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ ... 阅读全文
posted @ 2016-01-25 09:43 白水螺丝 阅读(238) 评论(0) 推荐(0)
通过css的before和after制作按钮的动画效果
摘要：看了下面网站的按钮效果，想自己也试试。http://tympanus.net/Development/CreativeLinkEffects/按照上面网站的效果实现。1.左右两侧出现边框的效果。相见代码如下：html代码： home project less代码：@charset "UTF-8... 阅读全文
posted @ 2016-01-22 17:31 白水螺丝 阅读(2147) 评论(0) 推荐(0)
:after伪类+content内容生成经典应用举例
摘要：一、简单说说content内容生成content内容生成就是通过content属性生成内容，content属性早在CSS2.1的时候就被引入了，可以使用:before以 及:after伪元素生成内容。此特性目前已被大部分的浏览器支持： (Firefox 1.5+, Safari 3.5+, IE 8... 阅读全文
posted @ 2016-01-22 15:16 白水螺丝 阅读(281) 评论(0) 推荐(0)
CSS3 transform对普通元素的N多渲染影响
摘要：一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如scale(1), translate(0,0)），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。以下就是自己列举的几个比较有代表性的表... 阅读全文
posted @ 2016-01-22 14:02 白水螺丝 阅读(261) 评论(0) 推荐(0)
CSS3 Animation
摘要：贝塞尔曲线生成器CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animatio... 阅读全文
posted @ 2016-01-14 15:38 白水螺丝 阅读(215) 评论(0) 推荐(0)
CSS3 Transition
摘要：上一次大篇幅整理了CSS3中动画属性中的Transform，今天我们接着一起来看CSS3动画属性中的另一个属性Transition。W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点... 阅读全文
posted @ 2016-01-14 14:13 白水螺丝 阅读(279) 评论(0) 推荐(0)
CSS3 Transform
摘要：CSS3制作动画的几个重要属性有：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种... 阅读全文
posted @ 2016-01-14 11:25 白水螺丝 阅读(288) 评论(0) 推荐(0)

返回顶部