CSS3(补充)
- css3完全向后兼容,因此不必要改变现有设计。
css3边框
- 通过css3,我们可以创建圆角边框,向矩形添加阴影,使用图片来绘制边框。
border-radius(圆角边框)
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* 旧版火狐需要前缀-o- */
}
- JavaScript语法👇
object.style.borderRadius="5px"
- 完整语法👇
border-radius: 1-4 length|% / 1-4 length|%;
- 👆上述
/
左边的四个数值是圆角的水平半径,后边的四个数值是圆角的垂直半径。
- 按照顺序设置每个角的值。如果省略左下角,则与右上角相同。如果省略右下角,则与左上角相同。如果省略右上角,则与左上角相同。
- 例子👇
border-radius: 2em 1em 4em / 0.5em 3em;
👆等价于👇
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
box-shadow(边框阴影)
div{
box-shadow: 10px 10px 5px #888888;
}
👇运行结果👇
- JavaScript语法👇
object.style.boxShadow="10px 10px 5px #888888"
- 完整语法👇
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置,允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。模糊的尺寸。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影(outset 改为内部阴影)。 |
border-image(边框图片)
border-image
属性是一个简写属性,用于设置以下属性:border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
- 如果省略值,会设置其默认值。
- 提示请使用
border-image-*
属性来构造漂亮的可伸缩按钮! - JavaScript语法👇
object.style.borderImage="url(border.png) 30 30 round"
值 | 描述 |
---|---|
border-image-source | 用在边框图片的路径 |
border-image-slice | 图片边框向内偏移 |
border-image-width | 图片边框的宽度 |
border-image-outset | 边框图像区域超出边框的量 |
border-image-repeat | 图形边框是否够应该平铺(repeat )、铺满(round )或拉伸(stretch ) |
css3背景
background-size
background-size
属性规定背景图片的尺寸。- 在css3之前,背景图片的尺寸是由图片的实际尺寸决定的。在css3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
- JavaScript语法👇
object.style.backgroundSize="60px 80px"
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度 第一个值设置宽度,第二个值设置高度 如果只设置一个值,第二个值会被设置为“ auto ” |
percentage | 以父元素的百分比来设置背景图像的宽度和高度 第一个值设置宽度,第二个值设置高度如果只设置一个值,则第二个值会被设置为“ auto ” |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域 背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 |
background-origin
-background-origin
属性规定背景图片的定位区域。
- 背景图片可放置于
content-box
(内容)、padding-box
(内边框)或border-box
(边框)区域。
background-clip
background-clip
规定背景的绘制区域。
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框 |
padding-box | 北京被裁剪到内边距框 |
content-box | 背景被裁剪到内容框 |
css3文本效果
text-shadow(文本阴影)
- 我们可以规定水平阴影,垂直阴影,模糊距离以及阴影的颜色
- 完整语法👇
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
自动换行
p {
word-wrap:break-word;
}
值 | 描述 |
---|---|
normal | 只在允许的换行点进行换行。 |
none | 不换行。元素无法容纳的文本会溢出。 |
unrestricted | 在任意两个字符间换行。 |
suppress | 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。 |
css3字体
- 通过css3,web设计师再也不必被迫使用“
web-safe
”字体了。
@font-face
- 在css3之前,web设计师必须使用已在用户计算机上安装号的字体。
- 通过css3,web设计师可以使用他们喜欢的任何字体。
- 在新的
@font-face
规则中,您必须首先定义字体名称(比如myFont),然后指向字体文件。
@font-face{
font-family: myFont;
src: url('Light.ttf');
}
div{
font-family:myFont;
}
使用粗体字体
- 只要
font-family
为“myFount
”的文本设置粗体,浏览器就会使用该字体。 - 通过这种方式,我们可以为相同的字体设置许多
@font-face
规则。
@font-face{
font-family: myFont;
src: url('Bold.ttf');
font-weight:bold;
}
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可选。定义如何拉伸字体。默认是 “normal ”。 |
font-style | ormal italic oblique | 可选。定义字体的样式。默认是 “normal ”。 |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可选。定义字体的粗细。默认是 “normal ”。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF ”。 |
css3 2D转换
- 通过css3转换,我们能够对元素进行缩放,移动,转动,拉长或拉伸。
- 转换是使元素改变形状,尺寸和位置的一种效果。
translate()方法(移动)
- 通过
translate()
方法,元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数:
div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
rotate()方法(旋转)
- 通过
rotate()
方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
scale()方法(尺寸)
- 通过
scale()
方法,元素的尺寸会增加或减少,根据给定的宽度(x轴)和高度(y轴)参数:
div{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
skew()方法(翻转)
- 通过
skew()
方法,元素翻转给定的角度,根据给定的水平线(x轴)和垂直线(y轴)参数:
div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
👇效果👇
matrix()方法(2D转换整合)
matrix()
方法把所有2D转换方法组合在一起。
-matrix()
方法需要六个参数,包含数字函数,允许您:旋转,缩放,移动以及倾斜元素。
css3 3D转换
- 转换是使元素改变形状,尺寸和位置的一种效果。
rotateX()方法(x轴)
- 通过
rotateX()
方法,元素围绕其x轴以给定的度数进行旋转。
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY()方法(y轴)
- 通过
rotateY()
方法,元素围绕其y轴以给定的度数进行旋转。
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
css3过渡
- 通过css3,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
工作原理
- 两条必要内容:
- 规定您希望把效果添加到哪个css属性上
- 规定效果的时上
例子:应用于宽度属性的过渡效果,时长为2s👇
div{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
如果时长未规定,则不会有过渡效果,因为默认值是0。
效果开始于指定的css属性改变值时。css属性改变的典型时间是鼠标指针位于元素上时。
div:hover{
width:300px;
}
注意:当指针移出元素时,它会逐渐变回原来的样式。
多项样式改变
- 如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
transition
-transition
属性是一个简写属性,用于设置四个过渡属性
值 | 描述 |
---|---|
transition-property | 规定设置过渡效果的css属性的名称 |
transition-duration | 对丁完成过渡效果需要多少毫秒或秒。默认是0 |
transition-timing-function | 规定速度效果的速度曲线 |
transition-delay | 定义过渡效果何时开始。默认是0 |
transition-timing-function
-transition-timing-function
属性规定过渡效果的速度曲线。
- 该属性允许通过过渡效果随着时间来改变其速度。
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1) ) |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(等于cubic-bezier(0.25,0.1,0.25,0.1) ) |
ease-in | 规定以慢速开始的过渡效果(等于cubit-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 函数中定义自己的值。可能的值是0 至 1 之间的数值。 |
css3动画
- 通过css3,我们能过创建动画,这可以在许多网页中取代动画图片,Flash动画以及JavaScript。
@keyframes规则
- 当我们在
@keyframes
中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。 - 通过规定至少一下两项css3动画属性,即可将动画绑定到选择器上:
- 规定动画名称
- 规定动画时长
- 如果忽略时长,动画不会允许,因为默认值是
0
动画是使元素从一种样式逐渐变化成另一种样式的效果。
我们可以改变任意多的样式,任意多的次数
用百分比来规定变化发生的时间,或用关键字“from
”和“to
”,等同于0%
和100%
0%
是动画的开始,100%
是动画的完成
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定@keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 。 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease ”。 |
animation-delay | 规定动画何时开始。默认是 0 。 |
animation-iteration-count | 规定动画被播放的次数。默认是1 。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal ”。另一个是“alternate ” |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running ”。 另一个是“paused ” |
animation-fill-mode | 规定对象动画时间之外的状态。 |
css3多列
- 通过css3,我们可以创建多个列来对文本进行布局——就像报纸那样。
column-count
例子:把div元素中的文本分隔为三列👇
div{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
}
column-gap
例子:规定列之间40像素的间隔👇
div{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
}
column-rule
例子:规定列之间的宽度,样式和颜色👇
div{
column-rule:3px outset #ff0000;
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
}
属性 | 描述 |
---|---|
column-count | 规定元素应该被分隔的列数。 |
column-fill | 规定如何填充列。 |
column-gap | 规定列之间的间隔。 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 |
column-rule-color | 规定列之间规则的颜色。 |
column-rule-style | 规定列之间规则的样式。 |
column-rule-width | 规定列之间规则的宽度。 |
column-span | 规定元素应该横跨的列数。 |
column-width | 规定列的宽度。 |
columns | 规定设置 column-width 和 column-count 的简写属性。 |
column-rule-style
值 | 描述 |
---|---|
none | 定义没有规则。 |
hidden | 定义隐藏规则。 |
dotted | 定义点状规则。 |
dashed | 定义虚线规则。 |
solid | 定义实线规则。 |
double | 定义双线规则。 |
groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |