HTML +CSS 学习(六)

HTML +CSS 学习(六)

文章目录

  • HTML +CSS 学习(六)
    • 1、text-shadow:
    • 2、box-shadow:
    • 3、mask 遮罩
    • 4、box-reflect
    • 5、blur模糊
    • 6、calc计算
    • 7、分栏布局
    • 8、伪元素:
    • 9、CSS Hack分类
    • 10、IE低版本常见BUG
    • 11、布局扩展

1、text-shadow:

文字的阴影
x y blur color

注:阴影的默认颜色是跟文字样色相同
注:通过逗号的方式进行分割,可以设置多阴影

2、box-shadow:

x
y
blur
spread
color
inset
多阴影

注:盒子阴影的默认样色是黑色。
注:默认就是外阴影,如果设置outset不起作用,可选的值只有inset表示内阴影。

3、mask 遮罩

url
repeat
x
y
w
h
多遮罩

注:mask目前还没有标准化,所以需要添加浏览器前缀。

注:默认是x、y都平铺。

4、box-reflect

above 上
below 下
left 左
right 右
距离
遮罩 | 渐变

渐变:只是针对透明度的渐变,不能支持颜色的渐变。

5、blur模糊

​ filter : blur()

6、calc计算

​ 四则运算

7、分栏布局

column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏

注:column-width和column-count不要一起去设置。

8、伪元素:

​ 伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。
​ :: selection
​ :: first-line / first-letter
​ :: before / after
​ …

9、CSS Hack分类

  1. CSS属性前缀法
    .elem{ _background:red; }

  2. 选择器前缀法

    *html .elem{ }

  3. IE条件注释法

    IE10以上已经不支持注释法

10、IE低版本常见BUG

  1. 透明度
  2. 双边距
  3. 最小高度
  4. 图片边框

11、布局扩展

  1. 等高布局
    利用margin-bottom负值与padding-bottom配合实现。

  2. 三列布局,左右固定,中间自适应

    1. BFC方式

    2. 定位

    3. 浮动 ( 双飞翼布局、圣杯布局 )
      margin负值

    4. flex弹性

你可能感兴趣的:(HTML,+,CSS)