项目的需要,需要一个背景半透明的效果,于是马上想到“opacity:0.5”等等,为兼容IE可能还会用到filter,如:
filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;
上面的是可以达到半透明的效果,但是会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这不是我想要的
上英文google.com翻阅半天,稍加总结和修改,终于功夫不负有心人,实现了可以兼容各浏览器,达到背景颜色半透明而不影响子元素的代码,如下:
background:rgba(0,0,0,0.6);
background: transparent\9;
zoom:1\8; /* required for the filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* IE5.5-7 */
上面的代码利用了rgba的半透明效果,为了兼容IE使用filter。
注意:这里的方法只是对背景颜色来说的,对于背景图片半透明不适用,背景图片半透明可以采用透明的png图片!
网页上设置的字体,一般是windows/MAC系统自带有的才会正常渲染出来,一般为微软雅黑,宋体等这样的常见字体,如果网页使用的字体,系统没有,那就要自定义了,如何自定义呢? 使用font-face
后台系统经常遇到的问题,父元素设置了`min-height:100%`,子元素设置`height:100%`,然哦你会发现,子元素的100%不生效
提到Box-sizing,先前的一篇文章也提到过,其实在布局的时候很好用,可以省去很多多余的代码,至于兼容性,目前还只能在移动端应用多,因为它是CSS3的属性。大家看几个例子,应该就一目了然了。
CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。
通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分
css fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。
什么是Sass,SCSS与它是什么关系?
通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)
css伪类和伪元素有什么区别?
记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.
CSS3实现滚动边框,渐变边框
CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。
浏览器 CSS 模块负责 CSS 脚本解析,并为每个 Element 计算出样式。CSS 模块虽小,但是计算量大,设计不好往往成为浏览器性能的瓶颈。
BFC(Block formatting context)直译为"块级格式化上下文"。它**是一个独立的渲染区域**,只有**Block\-level box**参与(在下面有解释), 它规定了内部的Block\-level Box如何布局,并且与这个区域外部毫不相干。
retina屏下(window.devicepixelratio>1),1px的边框会被渲染成2px,看起会比较粗,如何解决?
通过CSS隐藏input='number'时,右侧的箭头
在做移动端页面时,发现UC浏览器在文字居多的页面(如文章页面、关于我们页面),字体会自动放大。其他的浏览器都没有问题~~
css设置子元素半透明,兼容IE6-8
利用CSS截断单行文字,溢出的显示"..."
HTML标签textarea在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小
chrome、safari等现代浏览器,input,textarea,select等一些Form元素,会有一个默认的高亮样式
CSS针对超链接4个状态的设置是有顺序的,顺序不对,a链接的各种状态可能不会生效
在当前的WEB前端页面制作中,鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等),各种浏览器对CSS的解析效果会有所不同(少数),所以要想让页面完全的兼容所有浏览器,就必须要用css hack。可能不同的开发人员,使用的hack方式不一样,但最终的目的都是希望各种浏览器渲染出同样的页面效果
用两个◆制作尖角(引用腾讯微博中的做法)