css杂类收集2
2015-12-11 00:00
651 查看
过滤器实现
div{ filter:alpha(opacity=50); // ie8- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ opacity:0.5; // ie9+ and other browser }
ps:对于 opacity属性设置了之后,其子元素也会有透明度的。
ie实现渐变
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='',endColorstr='',GradientType=0); ps: startColorstr 指的是 endColorstr 指的是 GradientType 指的是 filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
ie滤镜的实现
filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值));
ps:该滤镜必须配合background属性一起使用,否则该滤镜失效
css3 平移,旋转,缩放的ie实现方式(工具)
http://www.useragentman.com/IETransformsTranslator/
transition 设置对象变换时候的过度效果
transition-property 设置对象中的参与过渡的属性 transition-duration 持续时间 transition-timing-function 动画效果 linear,ease, ease-in ease-out ease-in-out step-start step-end transition-delay 延迟时间 (多少秒之后执行)
背景的线性渐变效果
background-image:-moz-linear-gradient(top,'',''); background-image:-webkit-gradient(linear,0 0, 0 100%,from(),to()); background-image:-webkit-linear-gradient(top,'',''); background-image:-o-linear-gradient(top,'',''); background-image:linear-gradient(top bottom,'',''); // 低版本的ie 使用自带的滤镜解决 filter:progid:DIImageTransform.Miscrosoft.gradient(); filter:progid:DIImageTransform.Miscrosoft.gradient(enabled=false);
-webkit-font-smoothing 让字体看起来更加清晰
-webkit-font-smoothing: antialiased | none | subpixel-antialiased // antialiased 反锯齿 // none 小像素文本 // subpixel-antialiased 浏览器默认行为
增强图标字体的显示效果
.glyphicon{ position:relative; top:1px; display:inline-block; font-family:'Glyphicons Halflings' font-style:normal; font-weight:normal; line-height:1px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; // 设置grayscale对于图标字体表现更清晰,减轻次像素渲染带来的相邻像素色彩污染问题 }
关于伪类:before 和:after
对于伪类:before 和 :after : 在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素。 ps:需要注意的是,如果没有content属性,伪类元素将没有任何作用,但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在html源代码无法可见,伪类元素像其他元素一样会继承父类元素的一些css 属性 对于兼容性: ie8+ 一般用法: clearfix的实现
关于a标签的love 和hate(link,visited,hover,active)
未移入a标签的时候link 移入a标签的时候 link,hover 点击a标签的时候 link,hover,active 点击后未移入a标签的时候link,visited 点击后移入a标签的时候link,visited,hover 点击后再次点击a标签的时候 link,vistied,hover,active 如果存在多个样式,后面的样式会覆盖前面的样式,所以这四个伪类定义的时候是有顺序要求的。
如何清除图片下方出现的几个像素空白间隙
img{display:block} img{vertical-align:top;} #test{ font-size:0;line-height:0; }
如何让文本垂直对齐文本输入框
#test{vertical-align:middle}
为什么 standard mode 下 ie无法设置滚动条的颜色
将原来设置在body上的滚动条颜色样式定义到html标签选择符上就可以了
如何使得文本溢出边界不换行强制一行显示
设置的容器的width 和 whilt-space :nowrap 就可以了。然后可以设置 overflow:hidden ;text-overflow:ellipsis 就可以了。
文本自动换行
word-wrap 设置成break-word 就可以了
如何设置内联元素的高度
默认内联样式是不能设置height 元素的,只有通过将内联元素重新定义成行快级或者内联块元素之后,就可以了。
对于inline-block的理解
对于display:inline-block的元素,既具有了inline的属性,又拥有的block的属性,也就意味这他拥有了width,height,margin,padding,border属性。这些属性 是line 属性不具备的。 对于inline-block属性,具有很多兼容性的问题需要解决。
css3的 transition 过度效果触发的条件
一般需要在focus hover 之后才会被触发的。
text-overflow触发的条件
text-overflow 拥有两个选值: clip /ellipsis 触发的条件,同时满足 1.必须是块容器 2.overflow 必须是为非visible 3.显式或者隐式的定义 width /height 为非 auto 4.white-space 为 nowrap
white-space 与word-break 与 word-wrap的区别
white-space
在ie中,让div区域不占据空间
需要添加三个属性 height:0; line-height:0; font-size:0;
css 的兼容性写法
.demo { color: red;/*所有现代浏览器*/ color: green\9;/*所有IE浏览器*/ color: lime\0;/*IE8-9浏览器*/ *color: red;/*IE6-7浏览器*/ +color: blue;/*IE7浏览器*/ _color: orange;/*IE6浏览器*/ } 涉及到前缀的写法 -webkit-transition: -moz-transition: -o-transition: transition:
ie6 min-height 的实现
selector { min-height:500px; height:auto !important; // ie6 不支持这个属性, height:500px; // 因为height 之前设置了 !important 所以对于支持 !important 属性的浏览器,这个设置时没有意义的。 // 但是对于 ie6 是有效的。 }
解决inline-block元素之间的空白间距
ul { list-style: none outside none; padding: 10px; background: green; text-align: center; font-size: 0; /* 设置字体大小 */ } ul li { display: inline-block; zoom: 1; background: orange; padding: 5px; font-size: 16px; /* 恢复字体大小 */ letter-spacing: normal; /* 对象中的字符之间的最小,最大,最佳间隔 */ }
inline-block 元素如果换行显示了,会出现区域占据的
解决方案: inline-block元素之间不能有空格。
相关文章推荐
- css清除浮动clearfix:after的用法详解
- 《CSS3秘籍》第8-11章
- CSS格式化排版
- CSS的继承、层叠和特殊性
- CSS选择器
- CSS样式基本知识
- CSS3动画效果
- 认识CSS样式
- CSS之拖拽库
- 关于css,js,jQurey的外部引用
- CSS- 横向和纵向时间轴
- CSS---定位
- 史上最全的CSS hack方式一览
- CSS3中新出现的技术
- 【Html】CSS浮动(float,clear)通俗讲解
- w3school的css手册
- retina 图片样式
- css权重及优先级问题
- 当表单自动填充_去除chrome浏览器自动添加的默认样式
- 让字体变的更清晰CSS 中 -webkit-font-smoothing