【学习笔记】CSS3

CSS3学习

CSS3边框

用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序。
边框属性：

• border-radius：用于创建圆角（px）。( border-top-left-radius左上角弧度)
• box-shadow：添加阴影。
  box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

• border-image：用图像创建一个边框。
  border-image: source slice width outset repeat|initial|inherit;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置(url（1.png）)
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

CSS3 背景

背景属性：

• background-image：添加背景图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-image: url(1.gif), url(2.gif); 
可以给不同的图片设置多个不同的属性:
 background: url(1.gif) right bottom no-repeat, url(2.gif) left top repeat;

• background-size:指定背景图像的大小,大小是相对于父元素的宽度和高度的百分比的大小。
• background-origin:指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
• background-clip:背景剪裁属性从指定位置开始绘制(content-box, padding-box,和 border-box)。

CSS3 渐变（Gradients）

CSS3 定义了两种类型的渐变（gradients）：

1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2. 径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
从上到下（默认情况下）:
 background-image: linear-gradient(red, yellow);
 从左到右:
 background-image: linear-gradient(to right, red , yellow);
 对角:
  background-image: linear-gradient(to bottom right, red, yellow);

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。(数学坐标轴)。

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 径向渐变

径向渐变由它的中心定义。
为了创建一个径向渐变，也必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
颜色结点均匀分布（默认情况下）:
 background-image: radial-gradient(red, yellow, green);
 颜色结点不均匀分布
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

• shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
• size 参数定义了渐变的大小。(closest-side/farthest-side/closest-corner/farthest-corner(默认))

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变。

 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，使用 rgba(a,b,c,d) 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

CSS3 文本效果

文本属性：

• text-shadow:文本阴影----text-shadow: 水平阴影，垂直阴影，模糊的距离，阴影的颜色;
• box-shadow:盒子阴影。同上。（也可以在 ::before 和 ::after 两个伪元素中添加阴影效果）----制作卡片效果。
• text-overflow：指定应向用户如何显示溢出内容（ellipsis/clip）。
• word-wrap：自动换行属性强制文本换行，可能将一个单词分裂。word-wrap:break-word;
• word-break：单词拆分换行属性指定换行规则（keep-all(整个单词适当换行)/break-all（直接换行））

CSS3 字体

使用 CSS3，网页设计师可以使用喜欢的任何字体，在 CSS3 @font-face 规则中定义。
在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
} 
div
{
    font-family:myFirstFont;
}
</style>
使用粗体文本必须添加另一个包含粗体文字的@font-face规则:
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

CSS3 2D 转换

2D变换方法：

• translate():根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。translate值（从左移px，从顶部移px）
• rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。transform: rotate(xxdeg);
• scale():元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。（scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。）
• skew()：transform:skew(<angle> [,<angle>]);包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
• matrix()：matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

CSS3 3D 转换

在2D基础上加入z轴。

转换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许改变被转换元素的基点位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

CSS3 过渡

为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

1. 指定要添加效果的CSS属性。
2. 指定效果的持续时间。

过渡属性：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

CSS3 动画(animation)

动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

要创建 CSS3 动画，需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;//把 "myfirst" 动画捆绑到 div 元素，时长：5 秒
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}//可以利用百分比设置多个变化
}

CSS3的动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。(允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。)
animation-iteration-count	规定动画被播放的次数。默认是 1。(n/infinite)
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局。
几个 CSS3 的多列属性:

• column-count：指定了需要分割的列数。
• column-gap：定了列与列间的间隙。（px）
• column-rule-style：列与列间的边框样式。
• column-rule-width：两列的边框厚度。
• column-rule-color：两列的边框颜色。
• column-rule：column-rule-*所有属性的简写。
• column-span:指定元素跨越多少列。（1/all）
• column-width：指定了列的宽度。

CSS3 用户界面

用户界面特性来调整元素尺寸，框尺寸和外边框。
用户界面属性：

• resize：指定一个元素是否应该由用户去调整大小。

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

• box-sizing:以确切的方式定义适应某个区域的具体内容。

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

• outline-offset:对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
  轮廓与边框有两点不同：
  • 轮廓不占用空间
  • 轮廓可能是非矩形

规定边框边缘之外 15 像素处的轮廓：
div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

---

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction(弹性容器中定义)

指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性(弹性容器中定义)

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start：
  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
• flex-end：
  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
• center：
  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
• space-between：
  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
• space-around：
  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性(弹性容器中定义)

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-wrap 属性(弹性容器中定义)

用于指定弹性盒子的子元素换行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。

align-content 属性(弹性容器中定义)

用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

排序(弹性子元素属性)

order: <integer>;用整数值来定义排列顺序，数值小的子元素在页面中排在前面。可以为负值。

对齐(弹性子元素属性)

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

align-self(弹性子元素属性)

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch

• auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex(弹性子元素属性)

用于指定弹性子元素如何分配空间。
flex: n|auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

例子：
第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间：
.item1 {
    flex: 2;
}
.item2 {
    flex: 1;
}
 
.item3 {
    flex: 1;
}

CSS3 多媒体查询

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。
例如：可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

---

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

多媒体查询语法:
@media not|only mediatype and (expressions) {
    CSS 代码...;
}
可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

响应式 Web 设计 - Viewport

viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一个常用的针对移动网页优化过的页面的 viewport meta 标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

一个常用的针对移动网页优化过的页面的 viewport meta 标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。