目录
1, 边框
2, 背景
3, 文本
4, 字体
5, 转换
6, 过渡
7, 动画
8, 多列
9, 自定义尺寸
CSS 用于控制网页的样式和布局, 而 CSS3 是最新的 CSS 标准, 这篇文章将着重介绍 CSS3 中出现的新特性, 以及它们的使用方法
1, 边框
(1)圆角边框
可以使用 border-radius 属性用于创建圆角边框, 其接受长度值作为参数, 一般情况下, 我们需要指定 4 个值分别对应 top-left,top-right,bottom-right,bottom-left 四个方向, 但是运用 值赋值 的机制, 允许我们可以指定少于 4 个值
其规则如下:
如果省略 bottom-left, 则使用 top-right 代替
如果省略 bottom-right, 则使用 top-left 代替
如果省略 top-right, 则使用 top-left 代替
也就是说:
若提供四个值, 则分别设置 top-left,top-right,bottom-right,bottom-left
若提供三个值, 则第一个设置 top-left, 第二个设置 top-right 和 bottom-left, 第三个设置 bottom-right
若提供两个值, 则第一个设置 top-left 和 bottom-right, 第二个设置 top-right 和 bottom-left
若提供一个值, 则同时设置 top-left,top-right,bottom-right,bottom-left
如果希望为某一方向单独创建圆角边框, 则可以使用 border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius 分别设置
- div {
- text-align:center;
- color:#000000;
- background-color:#dddddd;
- padding:10px 40px;
- width:350px;
- height:20px;
- border:2px solid #a1a1a1;
- border-radius:25px;
- }
(2)边框阴影
可以使用 box-shadow 属性向边框添加一个或多个阴影, 该属性是由逗号分隔的阴影列表, 每个阴影由 2-4 个长度值, 可选的颜色值以及可选的 inset 关键词来规定, 省略长度的值是 0
h-shadow: 必需, 水平阴影的位置
v-shadow: 必需, 垂直阴影的位置
blur: 可选, 模糊距离
spread: 可选, 阴影尺寸
color: 可选, 阴影颜色
inset: 可选, 将外部阴影改为内部阴影
- div {
- width:350px;
- height:100px;
- background-color:#87CEEB;
- box-shadow: 10px 10px 5px #888888; /* h-shadow v-shadow blur color */
- }
(3)边框图片
可以使用 border-image 属性利用图片创建边框, 它是一个简写属性, 用于设置以下的属性:
border-image-source: 图片路径
border-image-slice: 图片边框向内偏移
border-image-width: 图片边框的宽度
border-image-outset: 边框图像区域超出边框的量
border-image-repeat: 像边框是否应该平铺 (repeated), 铺满(rounded) 或拉伸(stretched)
- div {
- border:10px solid transparent; /* 必须设置 border 属性, 否则默认无边框 */
- width:350px;
- height:20px;
- padding:10px 20px;
- -webkit-border-image:url(......) 30 30 round; /* Safari and Chrome */
- -moz-border-image:url(......) 30 30 round; /* Old Firefox */
- -o-border-image:url(......) 30 30 round; /* Opera */
- /* Internet Explorer 不支持 border-image 属性 */
- border-image:url(......) 30 30 round;
- }
2, 背景
(1)背景尺寸
可以使用 background-size 属性规定背景图片的尺寸, 在 CSS3 之前, 背景图片的尺寸是由图片的实际尺寸决定的, 而在 CSS3 中, 可以规定背景图片的尺寸, 其可选值如下:
长度值: 设置背景图像的高度和宽度, 第一个值设置宽度, 第二个值设置高度, 如果只设置一个值, 则第二个值会被设置为 auto
百分数值: 根据父元素的百分比来设置背景图像的宽度和高度, 第一个值设置宽度, 第二个值设置高度, 如果只设置一个值, 则第二个值会被设置为 auto
cover: 把背景图像扩展至足够大, 以使背景图像完全覆盖背景区域
contain: 把背景图像扩展至最大尺寸, 以使其宽度和高度完全适应内容区域
(2)定位区域
可以使用 background-origin 属性规定 background-position 属性相对于什么位置来定位, 其可选值如下:
padding-box: 背景相对于内边距框定位
border-box: 背景相对于边框盒定位
content-box: 背景相对于内容框定位
- div {
- padding:30px;
- border:1px solid black;
- background-image:url(......);
- background-repeat:no-repeat;
- background-origin:content-box;
- background-position:left;
- }
(3)绘制区域
可以使用 background-clip 属性规定背景的绘制区域, 其可选值如下:
padding-box: 背景被裁剪到内边距框
border-box: 背景被裁剪到边框盒
content-box: 背景被裁剪到内容框
- div {
- width:300px;
- height:300px;
- padding:30px;
- border:1px solid black;
- background-color:pink;
- background-clip:content-box;
- }
3, 文本
(1)文本阴影
可以使用 text-shadow 属性设置文本阴影效果, 该属性是逗号分隔的阴影列表, 每个阴影有两个或三个长度值和一个可选的颜色值进行规定, 省略的长度值是 0
h-shadow: 必需, 水平阴影的位置
v-shadow: 必需, 垂直阴影的位置
blur: 可选, 模糊距离
color: 可选, 阴影颜色
- h1 {
- text-shadow: 5px 5px 5px #888888;
- }
(2)文本修剪
可以使用 text-overflow 属性规定当文本溢出包含元素时发生的事情, 其可选值如下:
clip: 直接修剪文本
ellipsis: 显示省略符号来代表被修剪的文本
string: 显示给定的字符串来代表被修剪的文本
4, 字体
在 CSS3 出现之前, 必须使用已经在用户计算机上安装好的字体, 但是通过 CSS3, 可将需要使用的字体文件存放到服务器上, 它会在需要时自动下载到用户计算机上, 其在 @font-face 规则中定义
@font-face 规则中必须首先定义字体名称, 然后指向字体文件
- @font-face {
- font-family: fontName;
- src: url(......);
- }
然后在 html 中通过 font-family 属性引用字体名称
- div {
- font-family:fontName;
- }
如果需要使用粗体文本, 则需要包含另一个描述符的 @font-face
- @font-face {
- font-family: fontName;
- src: url(......);
- font-weight: bold;
- }
5, 转换
(1)基本转换
可以通过 transform 属性使元素改变形状, 尺寸和位置, 其接受一个转换方法并在方法中指定值
下面提及的 X 轴是平行于屏幕水平向右, Y 轴是指平行于屏幕垂直向下, Z 轴是垂直于屏幕指向外侧
平移方法
translate3d(x,y,z): 三维, 参数为三个长度值, 分别确定元素在 X 轴, Y 轴和 Z 轴的平移距离
translate(x,y): 二维, 参数为两个长度值, 分别确定元素在 X 轴和 Y 轴上的平移距离
translateX(x): 参数为一个长度值, 确定元素在 X 轴上的平移距离
translateY(y): 参数为一个长度值, 确定元素在 Y 轴上的平移距离
translateZ(z): 参数为一个长度值, 确定元素在 Z 轴上的平移距离
缩放方法
scale3d(x,y,z): 三维, 参数为三个数值, 分别确定元素在 X 轴, Y 轴和 Z 轴上的缩放倍数
scale(x,y): 二维, 参数为两个数值, 分别确定元素在 X 轴和 Y 轴上的缩放倍数
scaleX(x): 参数为一个数值, 确定元素在 X 轴上的缩放倍数
scaleY(y): 参数为一个数值, 确定元素在 Y 轴上的缩放倍数
scaleZ(z): 参数为一个数值, 确定元素在 Z 轴上的缩放倍数
旋转方法
rotate3d(x,y,z,n): 三维, 从 (0,0,0) 指向 (x,y,z) 构成旋转轴, 然后将左手拇指指向旋转轴正向, 此时用四指绕行方向确定旋转方向, n 值确定旋转角度
rotate(n): 二维, 参数为一个角度值, 若为正数, 则顺时针旋转, 若为负数, 则逆时针旋转
rotateX(x): 参数为一个角度值, 确定元素沿 X 轴的旋转角度
rotateY(y): 参数为一个角度值, 确定元素沿 Y 轴的旋转角度
rotateZ(z): 参数为一个角度值, 确定元素沿 Z 轴的旋转角度
翻转方法
skew(x,y): 参数为两个角度值, 分别确定元素沿 X 轴和 Y 轴的翻转角度
skewX(x): 参数为一个角度值, 确定元素沿 X 轴的翻转角度
skewY(y): 参数为一个角度值, 确定元素沿 Y 轴的翻转角度
- div {
- transform: translate(50px,100px);
- -o-transform: translate(50px,100px); /* Opera */
- -ms-transform: translate(50px,100px); /* IE 9 */
- -moz-transform: translate(50px,100px); /* Firefox */
- -webkit-transform: translate(50px,100px); /* Safari and Chrome */
- }
(2)旋转基点
transform-origin 属性需要配合 transform 属性一同使用, 用于设置旋转元素的基点位置, 使用格式如下: transform-origin: x-axis y-axis z-axis;
x-axis: 定义视图在 X 轴的位置, 可选值有 left,center,right, 长度值, 百分数值
y-axis: 定义视图在 Y 轴的位置, 可选值有 left,center,right, 长度值, 百分数值
z-axis: 定义视图在 Z 轴的位置, 可选值有 长度值
(3)背面可见性
可以使用 backface-visibility 属性定义当元素不面向屏幕时的可见性, 如果不希望看到旋转元素的背面时, 可使用该属性, 其可选值有两个:
visible: 背面可见
hidden: 背面不可见
6, 过渡
通过 CSS3, 我们可以在不使用 Flash 或 JavaScript 的情况下, 使得元素从一种样式变换为另一种样式时添加过渡效果
(1)属性名称
可以使用 transition-property 属性规定应用过渡效果的 CSS 属性名称, 当指定的 CSS 属性改变时, 过渡效果开始作用, 其可选值如下:
none: 默认值, 没有属性获得过渡效果
all: 所有属性获得过渡效果
名称列表: 定义应用过渡效果的 CSS 属性名称列表, 列表以逗号分隔
(2)作用时间
可以使用 transition-duration 属性规定过渡效果的速度时间, 其接受一个时间值, 默认为 0, 因此在使用过渡效果时, 必须要设置 transition-duration 属性, 否则将看不到过渡效果
(3)作用速度
可以使用 transition-timing-function 属性规定过渡效果的速度曲线, 其可选值如下:
linear: 以相同的速度从开始至结束
ease: 默认值, 以慢速开始, 然后变快, 以慢速结束
ease-in: 以慢速开始
ease-out: 以慢速结束
ease-in-out: 以慢速开始, 以慢速结束
cubic-bezier(n,n,n,n): 自定义, n 是 0 ~ 1 之间的数值
(4)延迟时间
可以使用 transition-delay 属性规定延迟过渡效果的开始, 其接受一个时间值, 默认为 0
(5)简写属性
为了方便, 可以仅在 transition 属性中设置所有有关过渡效果的属性, 设置的顺序如下:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- div {
- width:100px;
- height:100px;
- background:blue;
- transition:width 2s;
- -o-transition:width 2s; /* Opera */
- -moz-transition:width 2s; /* Firefox */
- -webkit-transition:width 2s; /* Safari and Chrome */
- }
- div:hover {
- width:300px;
- }
- /* 当鼠标停留在 div 元素上时, 其宽度将会变化, 从而产生过渡效果 */
7, 动画
通过 CSS3, 我们可以在不使用 Flash 或 JavaScript 的情况下, 使为网页创建动画. 我们可以通过 @keyframes 规则创建动画, 如果在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改变为新样式的动画效果
(1)动画名称
可以使用 animation-name 属性规定动画名称, 其可选值有两个:
none: 无动画, 可用于覆盖来自级联的动画
名称: 定义创建动画的 keyframe 名称
(2)播放时间
可以使用 animation-duration 属性规定动画完成一个周期所需时间, 其接受一个时间值, 默认为 0, 因此在使用动画时, 必须要设置 animation-duration 属性, 否则将看不到动画
(3)播放速率
可以使用 animation-timing-function 属性规定过渡效果的速度曲线, 其可选值如下:
linear: 以相同的速度从开始至结束
ease: 默认值, 以慢速开始, 然后变快, 以慢速结束
ease-in: 以慢速开始
ease-out: 以慢速结束
ease-in-out: 以慢速开始, 以慢速结束
cubic-bezier(n,n,n,n): 自定义, n 是 0 ~ 1 之间的数值
(4)延迟时间
可以使用 animation-delay 属性规定延迟过渡效果的开始, 其接受一个时间值, 默认为 0
(5)播放次数
可以使用 animation-iteration-count 属性规定动画的播放次数, 其接受一个数字, 默认是 1; 或者设置为 infinite, 表示无限次播放
(6)播放方向
可以使用 animation-direction 属性规定动画下一周期的播放方向, 其可选值如下:
normal: 默认值, 正常播放
alternate: 轮流反向播放
(7)播放状态
可以使用 animation-play-state 属性规定动画的播放状态, 其可选值如下:
running: 默认值, 正在播放
paused: 暂停
(8)间隙可见性
可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性, 其可选值如下:
none: 不改变默认行为
forwards: 在动画完成之后, 保持最后属性值(在最后一个关键帧中定义)
backwards: 在动画显示之前, 应用开始属性值(在第一个关键帧中定义)
both: 在动画显示之前应用开始属性值, 在动画完成之后保持最后属性值
(9)简写属性
为了方便, 可以仅在 animation 属性中设置所有有关动画的属性, 设置的顺序如下:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- div {
- width:100px;
- height:100px;
- background:red;
- position:relative;
- nimation:test 2s linear infinite alternate;
- /*Safari and Chrome*/
- -webkit-animation:test 2s linear infinite alternate;
- }
- @keyframes test {
- from {left:0px;}
- to {left:200px;}
- }
- /*Safari and Chrome*/
- @-webkit-keyframes test {
- from {left:0px;}
- to {left:200px;}
- }
8, 多列
(1)列数
可以使用 column-count 属性确定划分的列数, 其可选值如下:
数值: 自定义需要划分的列数
auto: 默认值, 由其他属性自动决定列数
(2)间隔
可以使用 column-gap 属性确定列间间隔, 其可选值如下:
长度值: 规定列间间隔为指定长度
normal: 规定列间间隔为一个常规间隔, W3C 的建议值是 1em
(3)样式
可以使用 column-rule 属性确定列间样式, 它是一个简写属性, 包含以下属性:
column-rule-color: 设置列间颜色规则, 其接受一个颜色值
column-rule-width: 设置列间宽度规则, 其可选值如下:
thin: 纤细宽度
medium: 中等宽度
thick: 宽厚宽度
长度值: 自定义宽度
column-rule-style: 设置列间样式规则, 其可选值如下:
none: 没有样式
hidden: 隐藏样式
dotted: 点状样式
dashed: 虚线样式
solid: 实线样式
double: 双线样式
groove:3D grooved 样式, 效果取决于宽度和颜色值
ridge:3D ridged 样式, 效果取决于宽度和颜色值
inset:3D inset 样式, 效果取决于宽度和颜色值
outset:3D outset 样式, 效果取决于宽度和颜色值
(4)列宽
可以使用 column-width 属性确定列的宽度, 其可选值如下:
长度值: 自定义列宽
auto: 默认值, 由浏览器自动决定列宽
9, 自定义尺寸
resize 属性规定是否由用户调整元素的尺寸, 其可选值如下:
none: 用户无法调整元素的尺寸
horizontal: 用户可调整元素的宽度
vertical: 用户可调整元素的高度
both: 用户可调整元素的高度和宽度
注意, 在使用此属性前必须先设置 overflow 属性, 其值可以是 auto,hidden 或 scroll
- div {
- border:1px solid;
- width:350px;
- height:20px;
- padding:10px 40px;
- overflow:auto;
- resize:both;
- }
来源: http://www.bubuko.com/infodetail-2950936.html