-
text-shadow:
文字的阴影
x y blur color注:阴影的默认颜色是跟文字样色相同
注:通过逗号的方式进行分割,可以设置多阴影 -
box-shadow:
x
y
blur
spread
color
inset
多阴影注:盒子阴影的默认样色是黑色。
注:默认就是外阴影,如果设置outset不起作用,可选的值只有inset表示内阴影。 -
mask 遮罩
url
repeat
x
y
w
h
多遮罩注:mask目前还没有标准化,所以需要添加浏览器前缀。
注:默认是x、y都平铺。
-
box-reflect
above 上
below 下
left 左
right 右
距离
遮罩 | 渐变渐变:只是针对透明度的渐变,不能支持颜色的渐变。
-
blur模糊
filter : blur() -
calc计算
四则运算 -
分栏布局
column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏注:column-width和column-count不要一起去设置。
-
伪元素:
伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。
:: selection
:: first-line / first-letter
:: before / after
… -
CSS Hack分类
-
CSS属性前缀法
.elem{ _background:red; } -
选择器前缀法
*html .elem{ }
-
IE条件注释法
IE10以上已经不支持注释法
-
-
IE低版本常见BUG
- 透明度
- 双边距
- 最小高度
- 图片边框
-
布局扩展
-
等高布局
利用margin-bottom负值与padding-bottom配合实现。 -
三列布局,左右固定,中间自适应
-
BFC方式
-
定位
-
浮动 ( 双飞翼布局、圣杯布局 )
margin负值 -
flex弹性
-
-
前端浏览器不同的bug以及文字阴影效果
最新推荐文章于 2024-04-03 13:16:07 发布