随笔分类 - CSS
摘要：因为一些原因，网站要变成灰色。 我看其他网站就是纯黑白，但是B站是有点暗的彩色，就像暗色印刷的书，记录下，其代码如下： 1 html.gray { 2 filter:grayscale(85%) saturate(80%); 3 -webkit-filter:grayscale(85%) satur
阅读全文
摘要：1、first-child first-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff} 2、last-child last-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff} 3、nt
阅读全文
摘要：1.因为国内360浏览器、QQ浏览器等更新较快，所以不考虑Chrome支持某个css与否，因为一般都支持。 2.因为火狐等使用的人较少，且更新较快，所以不考虑支持与否，因为一般都支持 3.主要就是汇总css中一些常用的东西，在ie几个版本的支持情况，如下 注明： 初始写作时间：2019年1月3日，以
阅读全文
摘要：1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的，感谢菜鸟教程：https://www.runoob.com/cssref/css3-pr-transform.html transform默认值none;就是不转换，不继承，js中对其更改示例：object.styl
阅读全文
摘要：1.transition的浏览器支持情况 IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了 2. 还是一步一步说说怎么用transition吧 页面只有一个div，其css如下： 鼠标移动到div上，div立刻变宽为300px，效
阅读全文
摘要：圆角border-radius，其css如下 IE9+支持（就是ie6,ie7,ie8都不支持），默认值是0，不继承，可以像下面那样设置4个角的值，也可以单独设置，如 border-top-left-radius:2em; 上面每个圆角都是标准的圆形来过渡的角，也可以用椭圆，x轴和y轴的值不相等，前
阅读全文
摘要：opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候，会出现什么效果？ 答曰：如果不设置opacity的话，会显示效果为A（可以理解为一个图片），将A按照opacity设置的不透明度，就是得到的最终效果B。效果之间从最内侧开始推。
阅读全文
摘要：先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。 就是这么简单的页面。显示结果如下 汉字占的地方是绿色部分是宽14px，高14px 英文字符占
阅读全文
摘要：以前网页中的局都是使用浮动来实现的（毕竟ie9也不支持flex-box）。而浮动在css中是一个挺难理解的概念，这次再巩固一下，float的具体使用事项。 1.行内元素和块元素的区别？ 行内元素（img,span）和其他非块元素在同一行显示。vs 块级元素（div，p）独占一行 行内元素设置widt
阅读全文