前端 day21

一 CSS属性

   1 阴影

     1 文本阴影/元素阴影

        属性：text-shadow：；

        属性值：

          h-shadow   设置水平阴影的位置，允许负值

          v-shadow   设置垂直阴影的位置，允许负值

          blur        设置模糊距离，数字越大越模糊；0显示为文本

          color       设置阴影颜色

       注：如果想添加多个阴影，每一组阴影用逗号分隔

    2 盒子阴影

      属性：box-shadow：；

      属性值：

          h-shadow   设置水平阴影的位置，允许负值

          v-shadow   设置垂直阴影的位置，允许负值

          blur        设置模糊距离，数字越大越模糊；0显示为文本

          spread      设置阴影大小（范围），可选值，可省略

          color       设置阴影颜色

     注：如果想添加多个阴影，每一组阴影用逗号分隔。

2 文本换行

   1 英文和数字默认显示：如果没有换行的情况下，尝试把下一个长单词放在下一行显示。

   

   2 word-wrap：break-word；

     功能：尝试把下一个长单词放在下一行显示，如果在下一行仍然有超出的情况下，自己。

  3 word-break：break-all；

    功能：粗暴的断句。

3 字体图标

  1 iconfont（阿里巴巴矢量图标库），登录

  2 搜索需要的图标，添加入库，添加至项目，加入项目，下载至本地，

  3 另存到站点，解压，重命名为icon

  4 在 .html 文件里引入下载的icon文件夹里的iconfont.css文件 

     <link rel=”stylesheet” href=”../icon/iconfont.css”>

  5  在i标签里加class名：iconfont 和要引入的图标类名

         <div class=”box”>

                Hello word!

                <I class=”iconfont icon-flower”> </i> you

                <I class=”iconfont icon-pingguo1”></i>and

                <I class=“iconfont”></i> me

         </div>

4 背景图

  1 background-origin：背景图起始位置

    属性值：(控制的是第一张背景图的位置) 背景图起始位置：

    padding-box   默认值（padding区域开始）

    border-box     边框

    content-box    内容

 2 background-clip：；背景的裁切（只显示哪个区域的背景）

    属性值：border-box：； 默认值

            content-box：；

            padding-box：：

  3 background-size：；控制背景图的大小

    属性值：宽度 高度

    属性值数值：10px 10px

                          100% 100%

                          cover     按背景图的比例放大，直到铺满背景为止

                          contain   按背景图的比例放大，直到一个方向铺满为止

     例：如果让背景图不变形的情况下，填满整个内容区，用cover

  4 多背景图的设置

     background：url( )；url( )；url( )；

5 颜色

  1 rgb（）

    rgba( )   让背景色透明，内容不会透明

    hsla（200，1%，99%, 0.6） 饱和度

6 边框

  1 图片边框

    把一张图片，当作一个边框显示

  

2 border-images：；简写

    属性值：

      border-images-source 用在边框的图片的路径

      border-images-slice   图片边框向内偏移，不加单位，切成九宫格。

    例: border-images-slice（26 26）

7 圆角

  1 border-radius：半径；

    一个值：四个角都是圆角

    二个值：左上&右下、右上&左下

    三个值：左上、右上&左下、右下

    四个值：从左上角开始顺时针设置（左上、右上、右下、左下）

  2 半径分为水平半径和垂直半径

    border-radius：水平半径/垂直半径；

   例：border-radius：10px 20px 30px 40px/40px 30px 20px 10px；

二 width新增属性

   1 width：；

      属性值：fill-available  合理分配有效剩余空间

                    fit-content   找元素内容的宽度，按照子元素宽度进行设置

                     

                   max-content   找元素最大的宽度

                   min-content   找元素最小的宽度

        例：width:100%； 和 width：fill-available；有什么区别？

            对padding增加后的解析状态有影响。

    2 calc

        calc(100% – 200px)   可以实现不同单位的计算

三 CSS3事件

    pointer-events：none；

       1 组织各种按钮（button\a）功能

       2 穿透遮罩层，不影响遮罩层在a上显示，同时也不影响滑过a的效果

            解释：26 26是上下各离图片26px来两刀，左右离图片26px来两刀四个角保留，余下的默认拉伸。

      border-images-repeat 图片边框是否平铺repeat 铺满round 拉伸stretch

       border-images-outset 边框向外偏移