CSS3学习笔记
CSS3学习笔记
- CSS3学习笔记
- border-radius
- box-shadow
- border-image
- 颜色之RGBA
- 渐变
- 线性渐变
- 径向渐变
- text-overflow和word-wrap
- 嵌入字体font-face
- text-shadow
- background相关样式
- background-origin
- background-clip
- background-size
- 多背景图片
- 2D变形
- 旋转rotate
- 扭曲skew
- 缩放 scale
- 位移translate
- 矩阵 matrix
- 原点 transform-origin
- 3D变形
- 设置透视
- 设置3D变形
- transition过渡
- 动画animation
- keyframes
- 使用动画
border-radius
语法：
borde-radius:[左上角] [右上角] [右下角] [左下角](px|em|%)
//指定一个值时表示四个角都一样通过设置部分角的半径为边长一半，可以实现圆或者半圆等效果
box-shadow
语法：
box-shadow:[阴影左右偏移的位置] [阴影上下偏移的位置] [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](inset为内部投影，省略为外部投影),...
//添加多个阴影时之间用逗号隔开即可注意：
- inset 可以写在参数的第一个或最后一个，其它位置是无效的。
- 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊，模糊可以理解为硬度；
- 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小，表示范围；
border-image
语法：
border-image:url([图片路径]) [] [] [] [](切割图片的宽度，单位为px但可省略，也可以用百分比四个值沿顺时针指定四个方向，可以简写为一个值) [图片延伸方式](round-平铺,repeat-重复,stretch-拉伸)效果：从四周向中心切割图片，切割的距离就是设置的边框的宽度，repeat表示一直重复，然后超出部分剪裁掉，而且是居中开始重复；round表示会压缩或拉伸边框图片，而stretch就是拉伸到符合长度，不会重复。
注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。
Firefox 26.0 下是可以准确区分的。
颜色之RGBA
RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：
color：rgba(R,G,B,A)
//A为透明度参数，取值在0~1之间，不可为负值。使用opacity也可以设置透明度，但这种方式设置的透明度会对整个元素产生影响（元素的内容都会透明）。反之，使用HSLA或RGBA则可以仅让元素的某些部分有透明效果。这样，一个元素可以带有HSLA透明背景，但内部的文字仍然不透明。
渐变
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
线性渐变
语法：
background: linear-gradient([渐变方向](direction方向/angle角度), [color-stop1], [color-stop2], ...);说明：
- 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示
0deg = to top 从下向上
90deg = to right 从左向右
180deg = to bottom 从上向下（默认值）
270deg = to left 从左向右
to top left 右下角到左上角
to top right 左下角到右上角
- 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
颜色可以用rbga值添加透明度，color-stop函数接受两个参数，第一个表示该点的颜色，第二个表示渐变的位置，可以用具体长度值，百分数和小数，0表示起点，0.5为中点,1为结束点；同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。
从起点位置开始渐变，所以起点之前是纯色，如果两个点的起点一致，那么就互相从那个点两边分开两种颜色，没有渐变直接突变。
径向渐变
语法：
background: radius-gradient([渐变起点](位置，px表示/center表示中间), [渐变形状](circle/ellipse) [渐变形状大小], [color-stop1], [color-stop2], ...);说明：
- 渐变形状要么是circle（圆形，渐变会均匀地向各个方向辐射），要么是ellipse（椭圆形，在不同的方向辐射量不同）。而渐变形状的大小则有很大的灵活性，
- 大小值可以是下列任何一种：
- closest-side：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。
- closest-corner：以距离中心点最近的一角为渐变半径。
- farthest-side：和closest-side正好相反，（渐变形状是圆形时）以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂直边为渐变半径。
- farthest-corner：以距离中心点最远的一角为渐变半径。
- cover：和farthest-corner完全一样。
- contain：和closest-side完全一样。
text-overflow和word-wrap
text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
语法：
text-overflow:clip(剪切)|ellipsis(显示省略标记)但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap; word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
语法：
word-wrap:narmal(控制连续文本换行)|break-word(表示内容将在边界内换行，如长单词或URL地址内部)嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face {
font-family : [字体名称];
src : url([字体文件在服务器上的相对或绝对路径]);
}
//设置完成后就可以在其他地方使用该字体
p {
font-family : [字体名称];
/*必须项，设置@font-face中font-family同样的值*/
}text-shadow
text-shadow可以用来设置文本的阴影效果。
语法：
text-shadow: X-Offset Y-Offset blur color;- X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
- Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
- Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
- Color：是指阴影的颜色，其可以使用rgba色。
background相关样式
background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip ： border-box | padding-box | content-box | no-clip参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。background-clip默认值为border-box。
background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
background-size: auto | <长度值> | <百分比> | cover | contain取值说明：
1. auto：默认值，不改变背景图片的原始高度和宽度；
2. <长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3. <百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4. cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5. contain：容纳，即将背景图片等比缩放直至某一边紧贴容器边缘为止。
多背景图片
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;eg：
background-image: url('http://img.mukewang.com/54cf2365000140e600740095.jpg'),
url('http://img.mukewang.com/54cf238a0001728d00740095.jpg'),
url('http://img.mukewang.com/54cf23b60001fd9700740096.jpg');
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
background:url('http://static.mukewang.com/static/img/logo_index.png') no-repeat top left/200px 70px,
url('http://static.mukewang.com/static/img/logo_index.png') no-repeat bottom right/150px 60px;注意：
- 用逗号隔开每组 background 的缩写值；
- 如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
- 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
- background-color 只能设置一个。
- 和多重阴影的排列顺序一样，排在最前面的图片在浏览器中显示时会覆盖在最上面。还可以在声明中追加背景颜色
2D变形
旋转rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
transform:rotate(90deg);扭曲skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
transform:skew(45deg);- skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 - skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
- skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
缩放 scale()
transform: scale(0.8, 0.8);- scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
- scaleX(x)元素仅水平方向缩放（X轴缩放）
- scaleY(y)元素仅垂直方向缩放（Y轴缩放）
位移translate()
- translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
- translateX(x)仅水平方向移动（X轴移动）
- translateY(Y)仅垂直方向移动（Y轴移动）
矩阵 matrix()
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());原点 transform-origin
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：
3D变形
设置透视
第一个要点是在父级元素上设置透视。这样就开启了3D场景
透视的值越大，就表示你的视点与3D场景之间的景深越大。因此，如果想要一点隐约的3D效果，就增大透视值；如果想要非常明显的3D效果，则减小透视值。（3D效果的立体程度，取决于3D场景与观察者之间的距离。）
perspective: 200px;注意：透视只会应用到其第一个子元素上
设置3D变形
在需要进行3D转换的元素上定义
transform-style: preserve-3d;然后可以使用如下方法
eg：
transform: translateZ(-25px) rotateX(90deg);表示z轴上后退了25px，X轴上旋转了90°。
transition(过渡)
在一个元素由一个样式转变成另一个样式时提供效果，即通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
首先需要定义这个元素的两个状态时的样式，然后在该元素样式中添加transition属性及其值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
1. 在默认样式中声明元素的初始状态样式；
2. 声明过渡元素最终状态样式，比如悬浮状态；
3. 在默认样式中通过添加过渡函数，添加一些不同的样式。
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，当“transition-property”属性设置为all时，表示的是所有中点值的属性。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
div {
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
div:hover {
width:200px;
}这段代码表示div的width从100px变化到200px（鼠标指向时），本来应该是瞬间变化的，加上transition属性后即变成逐渐变化的样子。
有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
a{
transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;
}动画animation
keyframes
使用css动画首先要定义keyframes关键帧，类似flash中的概念，语法如下：
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}在一个动画效果的不同时间点定义不同的样式，然后在元素css属性中使用这个关键帧。
可以设置多个关键帧（比如百分比值10%、20%、30%、40%等等），或者也可以使用from和to值来定义动画的开始帧和结束帧。但注意Webkit浏览器在使用from和to值的情况下效果无法保证（它更喜欢0%和100%）。
使用动画
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}animation的属性：
- animation-name:动画名称，要和keyframes定义的完全一致
- animation-duration：动画播放一边持续的时长
- animation-delay：延迟播放的时长
- animation-timing-function：动画的速度曲线
- animation-direction：主要有两个值normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
- animation-iteration-count：1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
- animation-play-state：主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
- animation-fill-mode：animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
- 在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
- none
默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
- forwards
表示动画在结束后继续应用最后的关键帧的位置
- backwards
会在向元素应用动画样式时迅速应用动画的初始帧
- both
元素动画同时具有forwards和backwards效果