Menu

  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay
  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay

CSS3学习笔记

19
Apr
2011

CSS3学习笔记

By Alex
/ in CSS
0 Comments
常用CSS3样式
文字
线性渐变

只有基于Webkit的浏览器才支持此特性,Firefox不支持:

CSS
1
2
3
4
5
selector  {
    background: -webkit-linear-gradient(#3ADB69, #059CF7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
背景
限制背景图片大小

注意:不能和背景颜色一起使用,但是可以和渐变背景一起使用:

CSS
1
2
3
4
5
6
7
8
9
selector {
    /* 不能和background-color配合 */
    background: -webkit-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: -o-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: -moz-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background-repeat: no-repeat;
    background-size: 3px 100%; /* 背景宽度3像素,高度100% */
}
线性渐变

CSS格式说明:

CSS
1
2
3
4
5
6
/* direction:表示渐变发生的方向 */
/* 预定义值:to bottom, to top, to right, to left, to bottom right */
/* 至少需要两个颜色(color-stop),支持透明度 */
selector {
    background: linear-gradient(direction, color-stop1, color-stop2,...);
}

从左向右的渐变: 

CSS
1
2
3
4
5
6
7
selector {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #3ADB69, #059CF7); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #3ADB69, #059CF7); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #3ADB69, #059CF7); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #3ADB69, #059CF7); /* Standard syntax */
}

你可以为direction指定任意的渐变角度:

CSS
1
2
3
4
5
6
7
/* 从下往上为0deg,顺时针旋转,90deg为从左往右 */
selector {
    background: -webkit-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Firefox 3.6 to 15 */
    background: linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* Standard syntax */
} 
设置占位符样式

要设置表单元素placeholder的样式,需要为不同浏览器设置伪元素/类的样式:

CSS
1
2
3
4
5
6
7
8
/* Safari, Google Chrome, Opera 15+ */
selector::-webkit-input-placeholder{}
/* Mozilla Firefox 19- */
selector:-moz-placeholder{}
/* Mozilla Firefox 19+ */
selector::-moz-placeholder{}
/* IE 10/11 */
selector:-ms-input-placeholder{} 
CSS选择器

我们知道CSS由一系列的规则组成,每个规则包括两个部分:选择器(selector)和声明块(declaration block)组成。

CSS3支持通过更多的选择器将元素和样式进行绑定,避免在HTML中添加不必要的class属性,进一步的实现内容与样式分离。

元素选择器

即元素的名称(tag name)为选择器,匹配一个类型的元素:

CSS
1
2
3
元素标签名 {
    /* 样式声明 */
}
类选择器

匹配特定的样式类,样式类通过HTML元素的class属性声明,一个元素可以声明多个样式类,以空格分隔:

CSS
1
2
3
4
5
6
.类名称 {
    /* 样式声明 */
}
元素标签名.类名称 {
    /* 样式声明 */
}

类选择器可以和元素选择器联用,进一步限制匹配范围,例如:

CSS
1
2
3
4
/* 匹配具有normal样式类的p元素 */
p.normal {}
/* 匹配具有normal样式类的任何元素 */
*.normal {}
多类选择器

 要限定目标元素同时具有多个样式类,可以使用多类选择器:

CSS
1
2
3
4
5
6
.类名称1.类名称2{
    /* 样式声明 */
}
 
/* 举例 */
p.normal.highlight{}

各样式类的顺序无关紧要。

ID选择器

 用于匹配具有特定ID的元素:

CSS
1
2
3
#标识符 {
    /* 样式声明 */
}
属性选择器

基于HTML元素的属性来匹配,包括4种变体:

选择器 说明
[attr] 匹配具有attr属性的元素
[attr=val] 匹配attr属性的值为val的元素
[attr~=val] 以空格分隔元素attr属性的值,如果分隔得到的数组元素,至少有一个为val,那么此选择器匹配该元素
[attr*=val] 子串匹配,匹配attr属性的值包含val的元素
[attr^=val] 子串匹配,匹配attr属性的值以val开头的元素
[attr$=val] 子串匹配,匹配attr属性的值以val结尾的元素

属性选择器可以和元素选择器联用,例如:

CSS
1
p[class~="normal"]{}
通配符选择器

用于匹配文档中所有元素:

CSS
1
2
3
* {
    /* 样式声明 */
}
选择器分组

如果多个选择器具有相同的样式规则,可以使用选择器分组,用逗号分隔多个选择器: 

CSS
1
2
3
选择器1, 选择器2 {
    /* 样式声明 */
}
后代选择器

也称为包含选择器、上下文选择器:

CSS
1
2
3
4
5
6
选择器1 > 选择器2 {
    /* 仅匹配选择器1匹配元素的直接子元素,且子元素满足选择器2 */
}
选择器1  选择器2 {
    /* 于上面类似,但是匹配任意后代,不限定直接子元素 */
}
兄弟选择器
CSS
1
2
3
选择器1 + 选择器2 {
    /* 匹配选择器1的任何后续兄弟元素(父元素相同),且这些兄弟元素匹配选择器2 */
}
伪类选择器

所谓伪类,是指非用户指定的样式类,而是CSS中预定义的、与元素状态相关的特殊类:

CSS
1
2
3
:伪类{
    /* 样式声明 */
}
链接伪类

以下伪类适用于链接元素: 

伪类 说明
:link 匹配未访问过的链接
:visited 匹配已经访问过的链接
动态伪类

以下伪类可以用于任何元素:

伪类 说明
:focus 匹配当前获得焦点的元素
:hover

匹配当前鼠标指针悬停的元素

注意:在移动浏览器上,表现为轻触后元素的样式,而且仅仅应用到最近轻触的那个元素

:active 匹配被用户输入激活的元素,鼠标在目标上按下时样式生效
:enabled 当前元素可用时的样式
:disabled 当前元素禁用时的样式
:read-only 当元素处于只读状态时的样式
:read-write 当元素处于读写状态时的样式
:checked 复选框、单选框处于选中状态时的样式
:selection 文字被选中时的样式
:default 页面打开时,默认处于选中状态的样式。后续即使取消选中,样式也不会取消
:indeterminate 如果选框组没有任何一个被选中,则针对整个组应用样式。一旦后续选中某个选框,则样式取消
伪元素选择器

类似于伪类,伪元素并不是文档中真实存在的DOM节点,它描述与其它元素的关系。伪元素选择器也以冒号开头。 

伪元素 说明
:first-letter 匹配块元素中的第一个字母
:first-line 匹配块元素中的第一行
:before 在目标元素的前面插入内容,例如:
CSS
1
2
3
4
5
6
7
p:before {
    content: "++"; /* 在元素前面插入的内容 */
    content: url(img.png) /* 还可以插入图片 */
    content: attr(alt) /* 插入HTML属性值 */
    /*counter(计数器名称)用于顺序排号,计数器名称任意*/
    content: '第'counter(c0) '节'
}
:after 在目标元素的后面插入内容
:first-child 匹配第一个子元素,即当前元素是其父元素的第一个子元素时,应用此样式
:last-child 匹配最后一个子元素
:nth-child 匹配第n个子元素,举例:
CSS
1
2
3
4
5
6
7
8
9
p:nth-child(5){
    /* 匹配第5个子元素 */
}
p:nth-child(odd){
    /* 匹配序号为奇数的所有元素 */
}
p:nth-child(even){
    /* 匹配序号为偶数的所有元素 */
}
:nth-last-child 匹配倒数第n个子元素
:nth-of-type 匹配第n个子元素,计数时仅仅考虑同类型元素
:nth-last-of-type 匹配倒数第n个子元素,计数时仅仅考虑同类型元素
:only-child 如果只有一个子元素,则针对此子元素应用样式
:root 将样式绑定到文档的跟元素,即html元素
:not 对某个元素应用样式,但是想排除其特殊的子元素时使用:
CSS
1
2
3
选择器1:not(选择器2){
    /* 样式声明 */
}
:empty 匹配没有子节点的元素
:target 匹配文档中的某个目标,即ID被链接Hash部分引用的元素,只有连接到目标元素之后,样式才生效
文本样式
样式/属性 说明
text-shadow 为文本添加阴影效果:
CSS
1
2
/*四个属性分别为:阴影水平偏移、阴影垂直偏移、阴影模糊半径、阴影颜色*/
text-shadow : length length length color;

若要在左上方向显示阴影,可以将偏移设置为负数
模糊半径越大,则阴影外向模糊的范围越大,此值可省略
某些浏览器支持设置多个阴影,这种情况下使用逗号分隔多个阴影参数

word-break 让文本自动换行,可以实现任意位置换行:
normal,使用浏览器默认换行规则
keep-all,只能在半角空格或者连字符处换行
break-all,允许任意位置换行
word-wrap 可以让长单词、URL地址等自动换行。该属性得到所有浏览器支持
normal,使用浏览器默认换行规则
break-word,允许在单词内部换行
@font-face  用于定义字体,字体来源可以是服务器
有多种字体类型可用,例如OpenType(.otf)、TrueType(.ttf),以及IE专用的Embedded OpenType(.eot)。下面是一些例子:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@font-face {
    font-family: Gmem;
    src: url("fonts/gmem.otf") format("opentype");
    font-weight: normal;
}
/* 用于IE的字体定义,不需要指定format */
@font-face {
    font-family: Gmem;
    /* local表示使用客户端本地字体,指定多个源时,前面的优先使用 */
    src: local(Gmem), url("fonts/gmem.eot");
    font-weight: normal;
}
 
/* 引用字体定义 */
p {
    font-family: Gmem;
}

注意,可以为同一个font-family定义多个变体(font-weight、font-style不同) 

font-size-adjust 可以在切换字体后,保持文字大小不变 
盒(Box)样式

在CSS中, display 属性用于定义盒的类型。 总体上盒分为块(Block)和内联(Inline)两种类型,如果设置为none,则元素不会显示且不占用文档空间。

inline-block类型

在CSS2.1追加了一种inline-block类型。下面的例子说明这三者的区别:

绿色的部分display:inline是一个inline元素
绿色的部分display:block是一个block元素
绿色的部分display:inline-block是一个inline-block元素

上例中,灰色背景指示了父块元素的边界,绿色背景指示了设置不同Box类型的子元素的边界,子元素的宽高被设置为100像素。

可以看到,block、inline-block元素遵循宽高设置,而inline、inline-block元素则在“行内”显示。

使用inline-block可以方便的实现并列显示,避免使用float、position等复杂的布局方式。使用inline-block并排显示时,默认是底部对齐,可以修改 vertical-align 样式改变。

其它盒类型
盒类型 说明
list-item 可以把多个元素作为列表的条目显示,并且在元素前面添加列表的标记,标记样式可以用 list-style-type 设置
run-in 此类元素的后面如果还有block元素,那么run-in元素将被包含在block的内部
compact 此类元素的后面如果还有block元素,那么compact元素将放置在左边
flex 设置弹性盒子容器,子元素采取CSS3弹性盒子模型进行布局
inline-flex 设置弹性盒子容器,内联方式渲染
inline-table 类似于inline-block,允许一般情况下作为块元素的表格可以内联显示,让其前后环绕文字
table 此类型元素用于表格方式显示的父元素
table-row 用于表格中的一行,可以让任意元素实现tr的显示效果
table-cell 用于表格中的一个单元格,可以让任意元素实现td、th的显示效果
table-row-group 用于表格中主体行的父元素,可以让任意元素实现tbody的显示效果
table-header-group 用于表格中头部行的父元素,可以让任意元素实现thead的显示效果 
table-footer-group 用于表格中脚注行的父元素,可以让任意元素实现tfoot的显示效果  
盒内容溢出

如果设置了盒的宽高,当某些内容无法容纳到盒中时,可以使用overflow属性决定溢出内容如何显示:

属性 说明
overflow 盒中容不下时,如何显示内容:
hidden,溢出的内容将被隐藏
scroll,总是显示滚动条,溢出的内容可以滚动显示
auto,根据需要显示垂直、水平滚动条
visible,相当于不设置overflow属性,溢出内容照常显示到盒的外部
overflow-x 与overflow类似,但是分别设定水平、垂直方向的溢出处理
overflow-y
text-overflow 只用于盒中文本内容在水平方向溢出时:
ellipsis,显示省略号(...)代替溢出的文本
box-shadow

在CSS3中,该属性可以给盒子添加阴影。使用Safari浏览器时,需要写作 -webkit-box-shadow ;使用Firefox元素时,需要写作 -moz-box-shadow 。语法: box-shadow: length length length color; ,和text-shadow类似,四个值分别是阴影的水平、垂直偏移量,模糊半径和颜色。

将模糊半径设置为0,则阴影没有渐变消失的效果;将偏移设置为0,则可以实现类似于外发光的效果。

box-sizing

在CSS3中,该属性指定如何计算元素的宽高。我们知道width、height用于设置元素的宽高,而box-sizing可以指示此宽高是否包含元素的内部补白、边框的宽高。

此属性设置为 content-box ,则宽高不包含补白、边框;设置为 border-box ,则宽高包含补白、边框。

使用Safari、Firefox、IE时,此属性分别要写作 -webkit-box-sizing 、 -moz--box-sizing 、 -ms-box-sizing 。

背景和边框样式
新增背景属性
属性 说明
background-clip 指定背景的显示(剪切)范围:
border-box,背景显示范围包括边框
padding-box,不包括边框,但是包括内补白
content-box,不包括边框和内补白
background-origin 指定绘制背景图像时相对于什么位置来定位其绘制起点:
padding-box,相对于内补白框(即补白的最外部分)定位
border-box,相对于边框定位
content-box ,相对于内容框定位
background-size 指定背景图片的尺寸:
length,指定宽高像素,第一个值为宽,第二个值为高(默认auto)
percentage,指定宽高百分比,第一个值为宽,第二个值为高(默认auto)
cover,等比例放大图片,以便覆盖全部背景区域,可能有部分背景图片无法显示
contain,等比例放大,直到宽或高和背景区域的宽或高一致
新增边框属性
属性 说明
border-radius 绘制圆角边框,可以指定1-4个值,值可以是像素或者百分比,50%用于绘制圆形边框
包含几个变体,分别指定四个角的半径
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-image 使用图片来绘制边框
布局相关样式
多列布局

使用column-count属性,可以把块中的文本均匀的划分到多列显示。可以同时使用column-gap、column-rule,来指定列之间的间隙大小、列分隔线的颜色举例:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.newspaper {
    /* 分为三列显示 */
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    /* 列与列之间的间隙为40像素 */
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    /* 列与列之间分隔线的样式 */
    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}
弹性盒子布局

CSS3引入了新的布局模型:弹性盒子(Flexbox)。设置样式 display: flex 或者 display: inline-flex ,则元素成为弹性盒子容器,其直接子元素则自动成为弹性盒子条目。Chrome 29、IE 11、Firefox 28之后的浏览器完整的支持弹性盒子模型。

弹性盒子布局仅关注条目在容器中的排列,条目内部如何显示不受影响,此布局的特性和ExtJS的flex布局很类似。

容器属性
属性 说明
display 设置为flex或者flex,启用弹性盒子布局模型。要支持webkit核心的浏览器,需要额外指定一次display属性:
CSS
1
2
3
4
.flex-container {
    display: -webkit-flex;
    display: flex;
} 
flex-direction
-webkit-flex-direction
说明条目在容器中的排列方向:
row,默认值,从左到右
row-reverse,从右到左
column,从上到下
column-reverse,从下到上
justify-content
-webkit-justify-content
如果条目没有完全用掉容器main-axis上的空间,如何水平的对齐条目:
flex-start,默认值,条目集中在容器开始处
flex-end,条目集中在容器结束处
center,条目集中在容器中间
space-between,在条目之间保留空白
space-around,在条目开始、之间、结束保留空白
align-items
-webkit-align-items
如果条目没有完全用掉容器cross-axis上的空间,如何垂直的对齐条目:
stretch,默认值,伸展条目以充满空间
flex-start,条目被存放在容器顶部
flex-end,条目被存放在容器底部
center,条目被存放在容器中间(垂直)
baseline,条目被存放在容器的baseline
flex-wrap
-webkit-flex-wrap
指定条目是否可以换行(到下一个flex line),当一个flex line空间不够时:
nowrap,默认值,不换行
wrap,如果必要,换行
wrap-reverse 如果必要,按逆序换行(即新行插入到前面)
align-content
-webkit-align-content
与align-items类似,但是其对齐的是Flex line
条目属性
属性 说明
order
-webkit-order
相对于其它条目,在容器内的显示顺序
margin 设置为 margin: auto 吸收全部多余空间,可能把后续条目推向一边,还可以实现相对于容器完全居中(水平、垂直)
align-self
-webkit-align-self
覆盖容器的align-items属性
flex
-webkit-flex
指定占据容器宽/高的比值,整数,类似于ExtJS的flex属性
转换(Transform)

在CSS3中,利用转换功能,可以对文字或图像进行旋转、缩放、倾斜、移动处理。 要进行转换,可以指定CSS属性 transform ,其语法为:

CSS
1
2
/* 多个转换函数以空格分开,可同时使用 */
transform: none|transform-functions;

Internet Explorer 10、Firefox、Opera 支持 transform 属性;Internet Explorer 9仅支持通过 -ms-transform 进行2D转换;Safari、Chrome支持通过 -webkit-transform 进行2D/3D转换。下面是一个旋转转换的例子:

CSS
1
2
3
4
5
6
7
div {
    transform: rotate(7deg);
    -ms-transform: rotate(7deg); /* IE 9 */
    -moz-transform: rotate(7deg); /* Firefox */
    -webkit-transform: rotate(7deg); /* Safari 和 Chrome */
    -o-transform: rotate(7deg); /* Opera */
}
转换函数
函数 说明
none 不进行转换
matrix() 使用6个值进行2D矩阵转换
matrix3d() 使用16个值进行3D的4x4矩阵转换
translate(x,y) 进行移动转换,正数表示向右、下移动,负数表示向左、上移动

 

translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale(x,y) 进行缩放转换,x为0.5表示宽度减少为50%
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate(angle) 进行旋转转换,正数表示顺时针旋转,负数表示逆时针旋转
使用 transform-origin 可以定义旋转的基点,此属性语法:
CSS
1
2
3
4
/* x-axis可以取值left center right 数值 百分比*/
/* y-axis可以取值top center bottom 数值 百分比*/
/* z-axis可以取值 数值 */
transform-origin: x-axis y-axis z-axis;

 

 

rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
skew(x-angle,y-angle) 进行扭曲转换,angle用于把x轴或者y轴日绕原点旋转一定的角度

 

skewX(angle)
skewY(angle)
perspective(n) 为3D转换元素定义透视视图
动画

通过CSS3动画,可以让页面上的文字、图像具有移动、淡入淡出、变形等动画效果。CSS3支持通过两种方式实现动画:

  1. Transitions:从一个CSS属性过渡到另外一个属性,形成动画效果
  2. Animations:通过指定多个关键帧,实现更加复杂的动画效果
transition属性

该属性的语法如下:

CSS
1
2
3
4
5
/* property 需要实现过渡的CSS属性名称,该值对应属性transition-property */
/* duration 完成过渡需要的时间,s或者ms,该值对应属性transition-duration */
/* timing-function 规定速度曲线的函数,该值对应属性transition-timing-function */
/* delay 规定何时启动过渡效果,该值对应属性transition-delay */
transition: property duration timing-function delay;

其中timing-function指定速度曲线函数,可选值包括:

timing-function值 说明
linear 以匀速完成过渡,等价于cubic-bezier(0,0,1,1)
ease 以慢速开始,然后变快,最后慢速结束的过渡效果,等价于cubic-bezier(0.25,0.1,0.25,1)
ease-in 以慢速开始、逐渐变快的过渡效果,等价于 cubic-bezier(0.42,0,1,1)
ease-out 以快速开始、逐渐变慢的过渡效果,等价于cubic-bezier(0,0,0.58,1)
ease-in-out 以慢速开始、逐渐变快、再逐渐变慢并结束的过渡效果,等价于cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 自定义 cubic-bezier函数
Animation功能

要使用此功能,首先要定义一种特殊的CSS规则,语法如下:

CSS
1
2
3
4
5
6
7
8
9
@keyframes animation-name {
    from | to | percent {
        css-property : value;
        ... /*可以指定多个属性*/
    }
    ... /*可以指定多个帧*/
}
/* Safari 和 Chrome 使用下面的方式定义 */
@-webkit-keyframes {}

然后,可以在某个样式规则中引用已经定义的动画:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.rule {
    /* 已定义的动画(@keyframes)的名称 */
    animation-name: animation-name; /* Safari 和 Chrome */
    webkit-animation-name: animation-name;
    /* 动画完成需要的时间,0意味着没有动画效果 */
    animation-duration: 5s;
    -webkit-animation-duration:2s; /* Safari 和 Chrome */
    /* 动画重复的次数,infinite则无限播放 */
    animation-iteration-count: 10;
    -webkit-animation-iteration-count: 10; /* Safari 和 Chrome */
    /* 当动画不在播放时(已经结束,或者延迟而尚未开始),如何显示目标元素 */
    /* none 默认值,在开始前、结束后,动画不会在目标上应用任何样式 */
    /* forwards 在动画结束后,将最后一帧的样式应用给元素 */
    /* backwards 在延迟动画开始前,将第一帧的样式应用给元素 */
    /* both 同时应用forwards和backwards*/
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;/* Safari 和 Chrome */
}
示例

最简单的例子,仅仅规定开始、结束两帧:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 移动效果 */
@keyframes slide {
    /*起始帧*/
    from {
        left: 0;
        top: 0;
    }
    /*结束帧*/
    to {
        left: 100px;
        top: 100px;
    }
 
}

 指定多个关键帧的例子:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 摇晃效果 */
@keyframes wobble {
    /*动画开始时*/
    0% {
        left: 100px;
    }
    /*动画时间消逝了40%时*/
    40% {
        left: 150px;
    }
    /*动画时间消逝了60%时*/
    60% {
        left: 75px;
    }
    /*动画结束时*/
    100% {
        left: 100px;
    }
}

进一步,还可以为每一个关键帧指定函数:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 弹跳效果 */
@keyframes bounce {
    from {
        top: 100px;
        animation-timing-function: ease-out;
    }
    25% {
        top: 50px;
        animation-timing-function: ease-in;
    }
    50% {
        top: 100px;
        animation-timing-function: ease-out;
    }
    75% {
        top: 75px;
        animation-timing-function: ease-in;
    }
    to {
        top: 100px;
    }
}
媒体查询(@media)

该特性用于针对特定媒体来改变样式,语法如下:

CSS
1
2
3
4
5
6
7
8
9
10
@media not|only mediatype and (media feature) {
    /* CSS样式规则 */
}
 
/* 示例 */
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

媒体类型包括:

all 匹配所有类型的媒体
print 匹配打印机
screen 匹配各种屏幕,包括手机、台式机、平板
speech 供屏幕阅读器读取的媒体

媒体特性包括纵横比、颜色深度、设备尺寸、分辨率等等,详见:W3schools。

使用媒体查询,可以很方便的实现“响应式布局”。以本网站的首页为例,当浏览器宽度变窄后,可以自动由三栏切换为单栏显示。Bootstrap是一个流行的可以实现响应式布局的UI框架。

其它CSS3新特性
颜色类属性值

在以前,CSS仅支持RGB颜色,并且只能通过 opacity 属性设置元素的透明度。CSS3新增加了RGBA、HSL、HSLA三种颜色类型。

利用RGBA、HSLA,可以基于alpha通道来设置透明度,其优势是可以针对背景、文字分别设置透明度,而opacity则只能整体上设置。下面是一个例子:

CSS
1
2
/* 四个数值分别为红、绿、蓝、透明度,完全透明为0,完全不透明为1 */
background-color: rgba(255, 0, 0, 0.5);
transparent

CSS3中,可以对一切颜色属性(color、border-color、background-color)设置特殊值  transparent ,相当于alpha为0.

resize属性

该属性允许用户通过拖拽方式来改变元素的尺寸,支持的值包括none、both、horizontal、vertical、inherit。 inherit表示继承父元素的设置。

initial值

这一值用于取消对某一属性的样式设置,恢复其默认值。

← 2011年清明节后扬州行
Python学习笔记 →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Related Posts

  • Sass学习笔记
  • CSS知识集锦

Recent Posts

  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
  • A Comprehensive Study of Kotlin for Java Developers
  • 背诵营笔记
  • 利用LangChain和语言模型交互
  • 享学营笔记
ABOUT ME

汪震 | Alex Wong

江苏淮安人,现居北京。目前供职于腾讯云,专注容器方向。

GitHub:gmemcc

Git:git.gmem.cc

Email:gmemjunk@gmem.cc@me.com

ABOUT GMEM

绿色记忆是我的个人网站,域名gmem.cc中G是Green的简写,MEM是Memory的简写,CC则是我的小天使彩彩名字的简写。

我在这里记录自己的工作与生活,同时和大家分享一些编程方面的知识。

GMEM HISTORY
v2.00:微风
v1.03:单车旅行
v1.02:夏日版
v1.01:未完成
v0.10:彩虹天堂
v0.01:阳光海岸
MIRROR INFO
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
Recent Posts
  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
    In this blog post, I will walk ...
  • A Comprehensive Study of Kotlin for Java Developers
    Introduction Purpose of the Study Understanding the Mo ...
  • 背诵营笔记
    Day 1 Find Your Greatness 原文 Greatness. It’s just ...
  • 利用LangChain和语言模型交互
    LangChain是什么 从名字上可以看出来,LangChain可以用来构建自然语言处理能力的链条。它是一个库 ...
  • 享学营笔记
    Unit 1 At home Lesson 1 In the ...
  • K8S集群跨云迁移
    要将K8S集群从一个云服务商迁移到另外一个,需要解决以下问题: 各种K8S资源的迁移 工作负载所挂载的数 ...
  • Terraform快速参考
    简介 Terraform用于实现基础设施即代码(infrastructure as code)—— 通过代码( ...
  • 草缸2021
    经过四个多月的努力,我的小小荷兰景到达极致了状态。

  • 编写Kubernetes风格的APIServer
    背景 前段时间接到一个需求做一个工具,工具将在K8S中运行。需求很适合用控制器模式实现,很自然的就基于kube ...
  • 记录一次KeyDB缓慢的定位过程
    环境说明 运行环境 这个问题出现在一套搭建在虚拟机上的Kubernetes 1.18集群上。集群有三个节点: ...
  • eBPF学习笔记
    简介 BPF,即Berkeley Packet Filter,是一个古老的网络封包过滤机制。它允许从用户空间注 ...
  • IPVS模式下ClusterIP泄露宿主机端口的问题
    问题 在一个启用了IPVS模式kube-proxy的K8S集群中,运行着一个Docker Registry服务 ...
  • 念爷爷
      今天是爷爷的头七,十二月七日、阴历十月廿三中午,老人家与世长辞。   九月初,回家看望刚动完手术的爸爸,发

  • 6 杨梅坑

  • liuhuashan
    深圳人才公园的网红景点 —— 流花山

  • 1 2020年10月拈花湾

  • 内核缺陷触发的NodePort服务63秒延迟问题
    现象 我们有一个新创建的TKE 1.3.0集群,使用基于Galaxy + Flannel(VXLAN模式)的容 ...
  • Galaxy学习笔记
    简介 Galaxy是TKEStack的一个网络组件,支持为TKE集群提供Overlay/Underlay容器网 ...
TOPLINKS
  • Zitahli's blue 91 people like this
  • 梦中的婚礼 64 people like this
  • 汪静好 61 people like this
  • 那年我一岁 36 people like this
  • 为了爱 28 people like this
  • 小绿彩 26 people like this
  • 彩虹姐姐的笑脸 24 people like this
  • 杨梅坑 6 people like this
  • 亚龙湾之旅 1 people like this
  • 汪昌博 people like this
  • 2013年11月香山 10 people like this
  • 2013年7月秦皇岛 6 people like this
  • 2013年6月蓟县盘山 5 people like this
  • 2013年2月梅花山 2 people like this
  • 2013年淮阴自贡迎春灯会 3 people like this
  • 2012年镇江金山游 1 people like this
  • 2012年徽杭古道 9 people like this
  • 2011年清明节后扬州行 1 people like this
  • 2008年十一云龙公园 5 people like this
  • 2008年之秋忆 7 people like this
  • 老照片 13 people like this
  • 火一样的六月 16 people like this
  • 发黄的相片 3 people like this
  • Cesium学习笔记 90 people like this
  • IntelliJ IDEA知识集锦 59 people like this
  • 基于Kurento搭建WebRTC服务器 38 people like this
  • Bazel学习笔记 37 people like this
  • PhoneGap学习笔记 32 people like this
  • NaCl学习笔记 32 people like this
  • 使用Oracle Java Mission Control监控JVM运行状态 29 people like this
  • Ceph学习笔记 27 people like this
  • 基于Calico的CNI 27 people like this
Tag Cloud
ActiveMQ AspectJ CDT Ceph Chrome CNI Command Cordova Coroutine CXF Cygwin DNS Docker eBPF Eclipse ExtJS F7 FAQ Groovy Hibernate HTTP IntelliJ IO编程 IPVS JacksonJSON JMS JSON JVM K8S kernel LB libvirt Linux知识 Linux编程 LOG Maven MinGW Mock Monitoring Multimedia MVC MySQL netfs Netty Nginx NIO Node.js NoSQL Oracle PDT PHP Redis RPC Scheduler ServiceMesh SNMP Spring SSL svn Tomcat TSDB Ubuntu WebGL WebRTC WebService WebSocket wxWidgets XDebug XML XPath XRM ZooKeeper 亚龙湾 单元测试 学习笔记 实时处理 并发编程 彩姐 性能剖析 性能调优 文本处理 新特性 架构模式 系统编程 网络编程 视频监控 设计模式 远程调试 配置文件 齐塔莉
Recent Comments
  • qg on Istio中的透明代理问题
  • heao on 基于本地gRPC的Go插件系统
  • 黄豆豆 on Ginkgo学习笔记
  • cloud on OpenStack学习笔记
  • 5dragoncon on Cilium学习笔记
  • Archeb on 重温iptables
  • C/C++编程:WebSocketpp(Linux + Clion + boostAsio) – 源码巴士 on 基于C/C++的WebSocket库
  • jerbin on eBPF学习笔记
  • point on Istio中的透明代理问题
  • G on Istio中的透明代理问题
  • 绿色记忆:Go语言单元测试和仿冒 on Ginkgo学习笔记
  • point on Istio中的透明代理问题
  • 【Maven】maven插件开发实战 – IT汇 on Maven插件开发
  • chenlx on eBPF学习笔记
  • Alex on eBPF学习笔记
  • CFC4N on eBPF学习笔记
  • 李运田 on 念爷爷
  • yongman on 记录一次KeyDB缓慢的定位过程
  • Alex on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • haolipeng on 基于本地gRPC的Go插件系统
  • 吴杰 on 基于C/C++的WebSocket库
©2005-2025 Gmem.cc | Powered by WordPress | 京ICP备18007345号-2