分类: CSS
MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿
MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿。
背景介绍
MacOS 升级最新版的 Sonoma 之后，通过 CSS 蒙层实现的样式，如果使用了 svg 会出现边缘锯齿。具体表现如下图：
这个现象在低版本 Chr[……]
苹果手机iPhone各型号分辨率及独立像素CSS适配
型号
尺寸
逻辑分辨率（点）
逻辑像素
Scale Factor
设备分辨率
物理像素
（渲染像素）
ppi
iPhone 3GS
3.5
320×480
@1x
320×480
163
iPhone 4
iPhone 4s
3.5
3[……]
IE6、IE7、IE8、Firefox、Chrome、Safari CSS hack兼容一览表
知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可[……]
前端扩展插件
模拟数据
Easy Mock
野狗
JavaScript 交互
waypoints 滚动到某元素触发某事件
JavaScript UI工具
autosize 自动调整textarea输入框大小
clipboardjs 剪切板
jQuery custom content scroller 滚[……]
Flex布局
2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
浏览器支持：IE10 F22 C21 O12.1 S6.1
教程参考：
– Flex 布局教程：语法篇 – 阮一峰
-[……]
CSS3的一些新奇属性和用法
1 clip
2 渐变 IE10+
background:linear-gradient(45deg,#fff,#fff);
radial-gradient
3 混合模式 mix-blend-mode/background-blend-mode[……]
CSS伪类、CSS伪元素详解
定义
CSS伪类 用于向某些选择器添加特殊的效果。
CSS伪元素 用于将特殊的效果添加到某些选择器。
这TM不一样吗？？？
CSS中的类选择器（class）是为了方便过滤（选择）元素，给这类元素添加样式，class是定义在HTML文档树中的。但是这在一些情况下是不够用的，比如用[……]
media query
css2中的media type属性，用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。media query属性的是media type属性的增强功能，使media type可以进行条件判断输出对应的css。
media query的使用方法[……]
CSS半透明背景
rgba支持IE8+。 [css] filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#cc000000', endColorstr = '#cc000000' )\9[......]
CSS清除浮动的方法
1.添加空<div>标签或者<br />
[html]
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#FFF; text-align:cente[……]
CSS布局问题总结
经典两栏自适应布局
HTML网页结构如下：
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
- 使用绝对定位。
CSS代码：
.[......]CSS3实现阴影和圆角效果（多浏览器兼容）
css3阴影：
[css]
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;[……]
CSS hack 兼容一览表
阅读全文ie6不支持无A状态伪类的解决办法
我们在做数据表格的时候，经常需要做鼠标经过一行变色的效果，以前碰到这个问题只能用onmouseover、onmouseout这类东西来解决，每行都加而且也只能改变背景颜色，效果不佳。其实在CSS中定义tr、td的伪类hover很容易能做出这样的效果，而且样式可以自定义的丰富美观。但遗憾的是现在占据主[……]