CSS3_01

2024-03-02 09:36:34

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;
}

####CSS3_01

四、盒子阴影

  • 语法：

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

    • 默认阴影颜色为黑色

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

CSS3_01

代码演示

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;
}

CSS3_01

五、文本阴影

  • 语法：

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

CSS3_01

代码演示

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;
}

CSS3_01

  • 火焰文字

    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;
}

CSS3_01

  • 立体文字

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

CSS3_01

  • 凹陷文字

    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;
}

CSS3_01

  • 描边文字

    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;
}

CSS3_01

六、文本换行

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;
}

CSS3_01

扩展：流光文字

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

    • -webkit-background-clip: text;

      • 用背景绘制文本区域

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

      • 将文字颜色填充为透明

      demo:渐变背景
      CSS3_01

      <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;
}

CSS3_01

八、多列布局

属性名 说明
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;
}

CSS3_01

  • 瀑布流布局

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

CSS3_01

> 代码

​	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定位，元素就会固定到适当位置

  • 应用：

CSS3_01

代码

​ 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;
}
上一篇：css3 骰子


下一篇：CSS3学习思维导图