CSS3_01

CSS3-01

一、概述

1、什么是 CSS3

• CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案。

2、CSS3 发展现状

• 移动端支持优于 PC 端
• W3C 仍然在对 CSS3 规范进行开发,不过，现代浏览器已经实现了相当多的 CSS3 属性支持

3、CSS3 主要模块

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 多列布局
• 2D/3D转换
• 动画

二、新增选择器

1、属性选择器

选择器	说明
element[属性名]	匹配具有该属性的元素
element[属性名=“value”]	匹配属性值等于value的元素
element[属性名^=“value”]	匹配属性值以value开始的元素
element[属性名$=“value”]	匹配属性值以value结尾的元素
element[属性名*=“value”]	匹配属性值中含有value的元素

代码演示

html:

<div id="one">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="darkblue">div4</div>
<div class="lightblue">div5</div>
<div class="bluesky">div6</div>

css:

div[id] {
    color: pink;
}

div[class="bluesky"] {
    color: red;
}

div[class^="div"] {
    color: green;
}

div[class$="blue"] {
    color: darkblue;
}

div[class*="blue"] {
    font-weight: bold;
}

2、伪类选择器

选择器	说明
element:first-child	父元素中的第一个子元素
element:last-child	父元素中的第一个子元素
element:nth-child(n)	父元素中的第n个子元素
element:nth-child(n+3)	父元素中第3个子元素及之后的所有子元素
element:nth-child(-n+3)	父元素中第3个子元素及之前的所有子元素
element:first-of-type	指定类型元素的第一个
element:last-of-type	指定类型元素的最后一个
element:nth-of-type(n)	指定类型元素的第n个
element:nth-of-type(n+3)	指定类型元素的第3个及之后的所有元素
element:nth-of-type(-n+3)	指定类型元素的第3个及之前的所有元素
element:empty	所有没有子元素的元素
:not(选择器)	除了指定选择器之外的所有元素
:checked	所有选中的表单元素
:disabled	所有禁用的表单元素
:focus	获取焦点的元素

• nth-child选择父元素里面的第几个子元素，不管是元素类型
• nth-of-type选择指定类型的元素

代码演示

html

<dl>
    <dt>title</dt>
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
</dl>

css

dl dd:first-child {
     color: red;
}

dl dd:first-of-type {
    color: red;
}

3、伪元素选择器

选择器	说明
element:before	在元素内部的最前面插入内容
element:after	在元素内部的最后面插入内容

• before和after必须有content属性
• before在内容前面，after 在内容后面
• before和after创建的是一个元素，但是属于行内元素
• 创建出来的元素在DOM中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

代码演示

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

三、盒子模型

• 语法：

  box-sizing: content-box | border-box;
  

  • border-box：设置元素宽高时包含content、padding、border
    • IE（怪异）盒模型（border-box）
    • IE6/5 是怪异模型，IE7开始是标准盒模型
  • content-box：设置元素宽高时只含content
    • W3C标准盒模型（content-box）

代码演示

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin:10px;
    padding: 20px;
    border: 5px solid red;
}

####

四、盒子阴影

• 语法：

  box-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离  阴影尺寸  阴影颜色	内/外阴影; 
  

  • 默认阴影颜色为黑色

  • 默认为外阴影，可设置为内阴影（inset）

代码演示

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, .4);
    /*box-shadow: 0px 0px 5px 5px rgba(0,0,0,.4) inset;*/
}

• 定义多阴影

  • 语法

    box-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离  阴影尺寸  阴影颜色	内/外阴影,
    			水平阴影(必需)  垂直阴影(必需)  模糊距离  阴影尺寸  阴影颜色	内/外阴影,
    			水平阴影(必需)  垂直阴影(必需)  模糊距离  阴影尺寸  阴影颜色	内/外阴影,
    			...;
    
    

    代码演示

    div {
        margin: 300px;
        width: 200px;
        height: 300px;
        background: skyblue;
        box-shadow: 5px 5px 15px 5px blue, -5px -5px 15px 5px red;
    }
    

五、文本阴影

• 语法：

  text-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离   阴影颜色;
  

代码演示

h1 {
    color: pink;
    text-shadow: 3px 3px 5px rgba(255, 0, 0, 0.8);
}

• 定义多色阴影

  • 语法

    text-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离   阴影颜色,
    			 水平阴影(必需)  垂直阴影(必需)  模糊距离   阴影颜色,
    			 水平阴影(必需)  垂直阴影(必需)  模糊距离   阴影颜色,
    			 ...;
    
    

    代码演示

    
    div{
        margin:100px auto;  
        text-align:center;
        font:bold 60px Microsoft Yahei;
        color:red;
        text-shadow:0.5em 0.5em 0.1em #600,
            -1em 1em 0.1em #060,
            1em -1em 0.1em #006;
    }
    

• 火焰文字

  body{
      background-color: #000;
  }
  
  div{
      margin:100px auto;  
      text-align:center;
      font:bold 60px Microsoft Yahei;
      color:red;
      text-shadow:0 0 4px  #fff,
          0 -5px 4px #ff3,
          2px -10px 6px #fd3,
          -2px -15px 12px #f80,
          2px -25px 18px #f20;
  }
  

• 立体文字

  
  div{
      margin:100px auto;  
      text-align:center;
      font:bold 60px Microsoft Yahei;
      color:#ddd;
      text-shadow:-1px -1px  #fff,
          		1px 1px #333;
  }
  

• 凹陷文字

  body{
      background-color: #ccc;
  }
  
  div{
      margin:100px auto;  
      text-align:center;
      font:bold 60px Microsoft Yahei;
      color:#ddd;
      text-shadow:-1px -1px  #333,
          1px 1px #fff;
  }
  

• 描边文字

  div{
      margin:100px auto;  
      text-align:center;
      font:bold 60px Microsoft Yahei;
      color:#ddd;
      text-shadow:-1px 0  black,
          0 -1px black,
          1px 0 black,
          0 1px black;
  }
  

六、文本换行

1、word-wrap

• 语法：

  word-wrap: normal | break-word; 
  

  • 规定中英文文本的换行规则
  • normal 只在允许的断字点换行（浏览器默认）
  • break-word 在长单词或 URL 地址内部进行换行

2、word-break

• 语法：

  word-break: normal | break-all | keep-all; 
  

  • 规定非中日韩文本的换行规则
  • normal 使用浏览器默认的换行规则
  • break-all 允许在单词内换行。
  • keep-all 只能在半角空格或连字符处换行

七、背景

1、background-size

• 语法：

  /* 宽度100px, 高度自适应 */
  background-size:100px; 
  
  /* 宽度自适应，高度100px */
  background-size:auto 100px;  
  
  /* 宽度200px ,高度100px */
  background-size:200px 100px; 
  
  /* 覆盖 */
  background-size:cover;
  
  /* 包含 */
  background-size:contain; 
  

  • 指定背景图像的大小。
  • CSS3以前，背景图像大小由图像的实际大小决定

2、background-origin

• 语法：

  background-origin:padding-box | border-box | content-box;	
  

  • 指定background-position属性的相对位置
    • background-attachment值为fixed时则该属性失效
  • padding-box 背景图像填充框的相对位置（默认）
  • border-box 背景图像边界框的相对位置
  • content-box 背景图像内容框的相对位置

3、background-clip

• 语法：

  background-clip:padding-box | border-box | content-box;	
  

  • 指定背景图像绘制区域

  • border-box 背景绘制在边框方框内（默认）

  • padding-box 背景绘制在内填充方框内

  • content-box 背景绘制在内容方框内

    div{
        box-sizing: border-box;
        width: 300px;
        height:300px;
        margin:100px;
        padding:50px;
        border:30px solid rgba(255,0,255,.3);
        background: #ccc url(bg.jpg) no-repeat -30px 0;
        background-size: auto 240px;
        background-origin:padding-box ;
        background-clip: padding-box;
    }
    

扩展：流光文字

• 实现流光文字需要用到以下两个属性

  • -webkit-background-clip: text;

    • 用背景绘制文本区域

  • -webkit-text-fill-color: transparent;

    • 将文字颜色填充为透明

    demo:渐变背景
    

    <div>
        <span>
            I love you forever
        </span>
    </div>
    

    div {
        display: table-cell;
        width: 800px;
        height: 150px;
        text-align: center;
        vertical-align: middle;
        background: #000;
        border-radius: 5px;
    }
    
    span {
        font: bold 60px/1em impact;
        background: linear-gradient(70deg, rgb(255, 0, 191), yellow 50%, green 60%, rgb(0, 110, 255));
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    

    demo: 图片背景

    span {
        font: bold 60px/1em impact;
        background: url(rose.jpg) repeat-x;
        background-size: contain;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    

八、多列布局

属性名	说明
column-count	指定元素应该被分割的列数
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写
column-gap	指定列与列之间的间隙
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的宽度
column-rule	所有 column-rule-* 属性的简写
column-span	指定元素要跨越多少列（一般针对标题进行设置）all
column-fill	指定如何填充列，默认为balance,可以改为auto

代码

​ html

<div class="article">
    <h3>生如夏花</h3>
    <div>
        生命，一次又一次轻薄过 轻狂不知疲倦 1 我听见回声，来自山谷和心间 以寂寞的镰刀收割空旷的灵魂 不断地重复决绝，又重复幸福 终有绿洲摇曳在沙漠 我相信自己 生来如同璀璨的夏日之花 不凋不败，妖冶如火 承受心跳的负荷和呼吸的累赘 乐此不疲 2 我听见音乐，来自月光和胴体 辅极端的诱饵捕获飘渺的唯美 一生充盈着激烈，又充盈着纯然 总有回忆贯穿于世间 我相信自己 死时如同静美的秋日落叶 不盛不乱，姿态如烟 即便枯萎也保留丰肌清骨的傲然 玄之又玄 3 我听见爱情，我相信爱情 爱情是一潭挣扎的蓝藻 如同一阵凄微的风
        穿过我失血的静脉 驻守岁月的信念 4 我相信一切能够听见 甚至预见离散，遇见另一个自己 而有些瞬间无法把握 任凭东走西顾，逝去的必然不返 请看我头置簪花，一路走来一路盛开 频频遗漏一些，又深陷风霜雨雪的感动 5 般若波罗蜜，一声一声 生如夏花之绚烂，死如秋叶之静美 还在乎拥有什么
    </div>
</div>

​ css

.article {
    width: 900px;
    height: 300px;
    padding: 10px;
    text-indent: 30px;
    line-height: 1.8em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: lightyellow;
    columns: 260px 3;
    column-gap: 40px;
    column-fill: balance;
    column-rule: 1px gray dotted;   
}

h3 {
    text-align: center;
    column-span: all;
}

• 瀑布流布局

  • 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

> 代码

​	html

```html
<div class="box">
        <div>
            <img src="a.jpg" alt="">
        </div>
        <div>
            <img src="b.jpg" alt="">
        </div>
        <div>
            <img src="c.jpg" alt="">
        </div>
        <div>
            <img src="d.jpg" alt="">
        </div>
        <div>
            <img src="e.jpg" alt="">
        </div>
        <div>
            <img src="f.jpg" alt="">
        </div>
        <div>
            <img src="g.jpg" alt="">
        </div>
    </div>
```

​	css

```css
.box {
    width: 740px;
    margin: 0 auto;
    columns: 240px 3;
    column-gap: 10px;
    column-fill: balance;
}

.box div img {
    width: 240px;
    border-radius: 10px;
    margin-bottom: 10px;
}
```

​	

九、粘滞定位

• 语法：

  position:sticky;	
  

  • 粘滞（粘性）定位是css定位新增属性
  • 粘滞定位可以说是static（静态定位） 和 固定定位fixed 的结合
  • 粘滞定位主要用在对 scroll 事件的监听上
  • 简单来说，在滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)，position:sticky这时的效果相当于fixed定位，元素就会固定到适当位置

• 应用：

代码

​ html

<div class="header">
    头部区域
</div>
<div class="menu">
    菜单栏
</div>
<div class="content">
    内容区域
</div>

​ css

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 120px;
    background: pink;
}

.content {
    width: 1200px;
    height: 3000px;
    margin: 0 auto;
}

.menu {
    position: sticky;
    top: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: purple;
}