概述
- 创建圆角
- 边框阴影
- 边框图片
- 背景
- 文本效果
- 字体定义
- 2D 转换
- 3D 转换
- CSS3 动画
- 多列
- CSS3 resize
- CSS3 box-sizing
- CSS3 outline-offset
创建圆角border-radius : length length; 边框圆角。
/* 如果 / 前后的值都存在,那么 / 前面的值设置其水平半径,/ 后面值设置其垂直半径,如果没有 / ,则水平和垂直半径相等 */
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
/* 上面写法等价于下面的写法,第一个值是水平半径,第二个值是垂直半径 */
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
边框阴影
box-shadow
向边框添加阴影。
{box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor}
{box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色}
div{
/* 内阴影,向右偏移10px,向下偏移10px,模糊半径5px,阴影缩小10px */
box-shadow: inset 10px 10px 5px -10px #888888;
}
边框图片
border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat
border-image : none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}
div{
border-image:url(border.png) 30 30 round;
border-image: url(border.png) 20/10px repeat;
}
背景
background-size
属性
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以设置背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
background-origin
属性
规定背景图片的定位区域,背景图片可以放置于 content-box
、padding-box
或 border-box
区域,
background-clip
属性
与background-origin
属性相似,规定背景颜色的绘制区域,区域划分与background-origin
属性相同。
CSS3 允许为元素设置多个背景图像
body{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
文本效果
text-shadow
属性
给为本添加阴影,能够设置水平阴影、垂直阴影、模糊距离,以及阴影的颜色。
text-shadow: 5px 5px 5px #FF0000;
text-wrap 属性 设置区域内的自动换行。
text-wrap: normal | none | unrestricted | suppress | break-word;
/* 允许对长单词进行拆分,并换行到下一行 */
p {word-wrap:break-word;}
字体定义
字体需要在 CSS3 @font-face 规则中定义。
/* 定义字体 */
@font-face{
font-family: myFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
/* 定义粗体时使用的字体 */
@font-face{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf'),
url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
/* 标识属性 */
font-weight:bold;
}
div{
font-family:myFont; /* myFirstFont */
}
2D 转换
对元素进行移动、缩放、转动、拉长或拉伸
Transform 方法汇总
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
3D 转换
rotateX() rotateyY() rotateZ() ……
过渡
transition : transition-property | transition-duration | transition-timing-function | transition-delay;
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
---|---|
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
CSS3 动画
通过 CSS3可以创建动画,这些动画可以取代网页中的画图片、Flash 动画以及 JavaScript。
CSS3 中通过@keyframes 规则来创建动画。
animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
@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"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |
多列
通过 CSS3够创建多个列来对文本进行布局,就像我们经常看到的报纸的布局一样。
CSS3 创建多列
column-count
属性规定元素应该被分隔的列数。
/* 将div中的文本分为3列 */
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
属性设置列之间的宽度、样式和颜色规则。
column-rule : column-rule-width | column-rule-style | column-rule-color
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-width | 规定列之间规则的宽度。 |
column-rule-style | 规定列之间规则的样式。 |
column-rule-color | 规定列之间规则的颜色。 |
column-span | 规定元素应该横跨的列数。 |
column-width | 规定列的宽度。 |
columns | 语法 : column-width column-count。 |
CSS3 resize
在 CSS3中resize
属性设置是否可由用户调整元素尺寸。
/* 设置div可以由用户调整大小 */
div{
resize:both;
overflow:auto;
}
CSS3 box-sizing
box-sizing
属性允许您以确切的方式定义适应某个区域的具体内容。边框计算在width中
/* 规定两个并排的带边框方框 */
div{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
CSS3 outline-offset
outline-offset
属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
-
轮廓不占用空间;
-
轮廓可能是非矩形;
/* 规定边框边缘之外 15 像素处的轮廓 */
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}