首页

# CSS3 新增特性

  1. 选择器
  2. 边框：圆角，阴影和边框图片
  3. 背景：背景图片大小，位置，平铺 1,2,3 今天
  4. 文字阴影、溢出，加载新字体 (将图标当字体使用) 1 次课
  5. 2D/3D 转换，过渡，动画 做出类似于 PPT 的效果，2 次课
  6. 多栏布局，弹性布局 1 次课
  7. 媒体查询，响应式 1 次课（一套代码可以用在多个终端中使用）

# CSS3 新增的选择器

在 5 年前，如果要体验 CSS3 的新特性，可能需要添加前缀来实现。
渐进增强的开发方式

1
2
3
4
chrome/safari:-webkit-		
firefox:-moz-
IE:-ms-
opera:-o-

  1. 之前学 jquery 接触过一部分 CSS3 选择器了
    回顾：

    1
    2
    3
    4
    div+p
    div~p
    div>p
    [属性名='属性值']{}

    伪元素 VS 伪类
    before VS 爱恨原则的区别

    1
    2
    3
    4
    5
    6
    7
    div:before{} //伪元素
    div:after{}
    ...
    //伪类
    div:active{}
    div:visited{}
    。。。

  2. 新增的选择器

    1
    2
    3
    4
    E:first-child 父元素的第一个子元素
    E:last-child   父元素的最后一个子元素
    E:nth-child(n) 匹配父元素的第n个子元素
    E:nth-of-type(n) 选择所有其父元素中同类型第n个位置的匹配E的子元素

# 边框样式：圆角和阴影 - 必备技能

  1. 圆角
    语法：跟 padding 一样，可以有多个取值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    div{
        //4个圆角都拥有10px的弧度
        border-radius:10px;
        //左上、左下为10，右上、右下为20px
    	border-radius:10px 20px;
        //左上，右上，右下，左下
    	border-radius:10px 5px 15px 20p;
        //左上1，右上和左下是3，右下是5px
    	borde-radius:1px 3px 5px;
        //很奇怪的写法： /  得到一个不规则的圆角
    	border-radius:10px/20px;
        //正圆：宽高一样，圆角为50%
    	border-radus:50%
    	
    }

  2. 阴影 - 盒子的阴影 - 立体效果（PS 中差不多）

    语法–必备技能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    语法:
    	box-shadow: h-shadow v-shadow [blur spread color inset];
    	blur:模糊的程度
    	spread：展开; 伸开；范围-模糊的半径
    	inset：默认是外阴影，如果去掉，则变成内阴影
    	//值的设置：
    	box-shadow:5px 5px;水平、垂直阴影的位置，必需，颜色默认为黑色
    	box-shadow:5px 5px black;
    	box-shadow:5px 5px 5px black;模糊距离
    	box-shadow:5px 5px 5px 5px black;阴影大小
    	box-shadow:5px 5px 5px 5px black inset;内阴影,该值不要则为外阴影(不需要额外声明外阴影)
    	//注意：如果颜色没有设置，但设置了color颜色，则阴影颜色同color字体颜色，否则默认为黑色

# 新增的背景属性

  1. 背景覆盖（大小）–重点

    解决了之前的痛点问题：当背景图和背景容器尺寸不一致如何缩放的问题。

    1
    2
    新增了一个特性：
    background-size:百分比|px|cover|contain

  2. 背景位置–了解

    1
    2
    3
    4
    5
    6
    语法：
    background-origin:content-box|padding-box|border-box; 	
    参数说明：
    	content-box：背景图像相对于内容框来定位
    	padding-box ：背景图像相对于内边距框来定位(默认值)
    	border-box：背景图像相对于边框盒框来定位

  3. 背景裁剪–IE 11 以上才支持–了解

    1
    2
    3
    4
    5
    6
    7
    语法：
    background-clip:content-box|padding-box|border-box;
    参数说明：
    	content-box：背景被裁剪到内容框
    	padding-box ：背景被裁剪到内边距框
    	border-box：背景被裁剪到边框盒框(默认值)
    	可用于背景图

# CSS3 多重背景

1
2
3
4
5
div{
    background:完整的背景1,完整的背景2，。。。
    //即可以写多套完整的属性，每套属性之间用逗号隔开
	background:url(01.jpg) no-repeat center,url(02.jpg) no-repeat;
}

# CSS3 多重阴影

1
2
3
4
5
div{
    box-shadow:完整的属性1,完整的背景2，。。。
    //即可以写多套完整的属性，每套属性之间用逗号隔开
	box-shadow:1px 2px,-1px -2px red,-1px -2px red;
}

# 文字阴影 - 支持多重阴影

1
2
3
4
5
6
7
8
属性：
text-shadow: h-shadow v-shadow blur color;
			水平阴影、垂直阴影、模糊大小，以及阴影的颜色
参数说明：
h-shadow，v-shadow正值向右，向下
h-shadow，v-shadow可为负值，向左，向上
多色阴影：以逗号分割的阴影效果，按照给定的顺序应用
即：最多写4个属性（全），最少可以写2个属性（最简单的）
1
2
3
4
5
div{
    text-shadow:完整的属性1,完整的背景2，。。。
    //即可以写多套完整的属性，每套属性之间用逗号隔开
	text-shadow:1px 2px,-1px -2px red,-1px -2px red;
}

# css 文本折行处理–面试

面试场景：随机拿 2 个来做比较，让你区分。

  1. 单词分割

    1
    2
    属性：
    word-break：normal/break-all[记住]/keep-all;

    作用：

    对于长单词或长的数字不会换行，对于中文则会换行，如果使用 keep-all 则都不会换行。
    该属性如果对于英文超出宽度部分直接截断。只要碰到边界就会折断，不管单词长短。

  2. 自动换行

    1
    2
    3
    4
    5
    属性：
    word-wrap:normal|break-word;
    允许对长的不可分割的单词进行分割并换行到下一行。
    值： 默认是没有分隔
    	break-word	在长单词或 URL 地址内部进行换行。

    规则：

    ​ 默认换行规则：单个的不可分割单词不会换行，长的单词如果在一行放不下，会换行到下一行显示。
    ​ 该属性对于英文，超出部分容不下的单词会换行处理，但可能会留下较多空白。即只有很长的在一行中容不下的单词才会截断，其他的会以单词为单位。

    1、2 的区别：

    对于长的单词，使用 1 会破坏单词完整性，使用 2 会尽可能的保留单词的完整性，但是可能会产生很多空白

  3. 段落中的文本不进行换行
    white-space:nowrap;// 记住

    1
    2
    3
    4
    5
    6
    7
    8
    white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;
    	该属性主要用于亚洲文字是否折行，默认是折行，一般设置nowrap不让中文折行。
    	normal	默认。空白会被浏览器忽略。
    	pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    	nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    	pre-wrap	保留空白符序列，但是正常地进行换行。
    	pre-line	合并空白符序列，但是保留换行符。
    	inherit	规定应该从父元素继承 white-space 属性的值。

  4. 文本溢出处理（要不要显示省略号）

    1
    2
    3
    4
    5

    属性：text-overflow: clip|ellipsis|string;
    	clip		修剪文本。	
    	ellipsis 显示省略符号来代表被修剪的文本(推荐)。	
    	string	使用给定的字符串来代表被修剪的文本。（不过在谷歌浏览器上不起作用，在火狐上可以）

  5. 让溢出的文本出现省略号

    1
    2
    3
    4
    5
    6
    7
    /*可以将cutFont当做类似于clearfix那样的公共样式使用，哪里需要添加省略号，就写在哪里*/
    .cutFont{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    /*注意：需要给容器添加宽度，即让文本要溢出才有效*/

# 图标字体 - 重点

图标字体从哪里来：

  1. 使用 AI - 矢量工具 - PS 差不多 - 自己造，自己设计自定义字体

  2. 用别人设计好的。阿里巴巴内部的一套系统
    www.iconfont.cn
    拥有非常丰富的字体资源，可以让我们定制一套属于自己的图标字体，而且还可以随时进行增删改查。

如何自定义字体教程步骤：

  1. 打开 www.iconfont.cn 开始找图标素材

  2. 搜索你要定制或要查找的图标字体，并加入购物车

  3. 在购物车中将这些图标添加到指定的项目，方便后期管理：增删改查

  4. 下载该项目–下载之前看看是不是选中的是 font-class

  5. 在项目中使用字体图标

  6. 根据使用说明书使用

    1
    2
    3
    4
    5
    1. 将font字体中的6个文件：1个iconfont.css和5个字体后缀提取到项目中
    2. 在项目HTML中导入该样式文件
    3. 添加一个空标签，比如span使用对应的字体
       <span class="iconfont icon-tongxunlu"></span>
    4. 可以通过添加额外的样式修改字体图标的文字大小和文字颜色等（将其当做普通文字看待）

  7. 如果要在原有的图标中新增或删除字体，需要再次回到网站中，将字体添加到购物车，到对应的项目，再下载再使用（即重复以上步骤）

# css3 渐变

https://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

可以代替背景图或者制作个性化的按钮。渐变就是一种特殊的颜色。

适用于背景中：background，不能用在 color 中。

  1. 线性渐变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    语法：
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
    //参数：
    direction：默认不写从上到下
    		to right   从左到右
    		to bottom right 从左上角到右下角
    颜色至少要写2个
    语法：
    background: linear-gradient(direction, color-stop1 size, color-stop2 size, ...);
    比如：
    background: linear-gradient(to right, yellow 10%, orange 50%);

  2. 径向渐变 - PS

    在线下的基础上多了一个参数：shape，形状

    1
    2
    3
    4
    5
    6
    7
    8
    9
    background: radial-gradient(center, shape, start-color size, ..., last-color size);

    参数说明：
    center：默认从中心开始渐变，其他值：top，bottom

    shape渐变的形状：默认是椭圆circle/ellipse
    size渐变的大小：默认颜色均匀分布
    实例：
    	background: radial-gradient(red, yellow);
更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝