html+ css基础笔记_布局_分栏_mark_笔记2_3

1. text-shadow:

    文字的阴影
    可选值复合写法： x y blur（阴影） color 
    写法：text-shadow  : -10px -10px 10px pink,-20px -20px 10px deeppink;左上角阴影、模糊
    注：阴影的 默认颜色 是跟文字样色相同
    注：通过“逗号”的方式进行分割，可以设置多阴影

2. box-shadow：

    对应值：
    x
    y
    blur
    spread
    color
    inset
    
    写法：box-shadow: 10px 10px 10px 5px blue inset;
    注：盒子阴影的默认样色是"黑色"。多阴影一样用逗号分开！！
    注：默认就是"外阴影"，如果设置outset不起作用，可选的值只有inset表示内阴影。

3. mask 遮罩

    url
    repeat
    x
    y
    w
    h
    多遮罩
    写法：-webkit-mask: url(img/car.png) no-repeat center center / 150px 150px;大小为150px*150px ，不平埔，在中心位置
    注：mask目前还没有标准化，所以需要添加浏览器前缀。

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

4. box-reflect（倒影）

    above   上
    below   下
    left    左
    right   右
    
    距离    某px
    遮罩 或者 渐变 
    写法：-webkit-box-reflect: below 15px linear-gradient(rgba(255,255,255,0) 60%,rgba(255,255,255,2));距离15px向下倒影，渐变
    
    渐变：只是针对透明度的渐变，不能支持颜色的渐变。

5.   blur（模糊）

 

        用法：filter : blur(某px)        （用的不多）

6. calc（计算）

        可用四则运算（=-*/），自动智能换算%和px
        写法：width: calc(100% - 100px);        不管父容器变大多少都是自动计算宽，记得空格空开

7. 分栏布局

      column-count : 分栏的个数
      column-width : 分栏的宽度 
      column-gap : 分栏的间距   
      column-rule : 分栏的边线
      column-span : 合并分栏
        单位：像素
    注：column-width和column-count不要一起去设置，会冲突！！！
          写法：column-count: 4;/* 分4栏 */
                column-gap: 30px;/* 栏间距30px */
                column-rule: 1px gray dashed;/* 分割线为虚线的灰色1px */
                column-span: all;合并所有

 
8. 伪元素

        伪元素本质上是创建了一个有内容的"虚拟容器"。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
        例如：
        :: selection
        :: first-line   /    first-letter
        :: before     /     after 
        …    
        伪类：本质上是为了补偿常规CSS选择器的不足，以便获得更多的信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规选择器获得的信息。
        例如：
        :hover        :focus        :empty...

9. CSS  Hack分类

    测试兼容的软件：IETest    百度搜索安装即可
    作用：解决浏览器兼容问题，为不同版本浏览器定制不同编写效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
    1. CSS属性前缀法
        格式：.elem{ _background:red; }
        
        前缀标识            兼容浏览器
        _                ie6
        +或*            ie6和ie7
        \9                ie6到ie9
        \0                ie8到