CSS3 模块
CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。
一些最重要CSS3模块如下:
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
一. CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序。
边框属性:
- border-radius(圆角属性)eg:{border:2px solid;border-radius:25px;}
- box-shadow(添加阴影) eg:{box-shadow: 10px 10px 5px #888888;}
- border-image(图片作为边框)eg:{border-image:url(border.png) 30 30 round;}
二.CSS3 背景
CSS3 中包含几个新的背景属性,提供更大背景元素控制。
- background-image(添加背景图片) 【CSS3 允许你在元素上添加多个背景图像】
- background-size(指定背景图像的大小)
- background-origin(指定了背景图像的位置区域)
- background-clip(背景剪裁属性是从指定位置开始绘制)
三.CSS3 渐变(gradients)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向(background-image: linear-gradient(direction, color-stop1, color-stop2, ...);)
- 径向渐变(Radial Gradients)- 由它们的中心定义(background-image: radial-gradient(shape size at position, start-color, ..., last-color);)
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); // css3线性渐变语法
background-image: linear-gradient(#e66465, #9198e5); // 从上到下的线性渐变
background-image: linear-gradient(to right, red , yellow); //从左到右的线性渐变
background-image: linear-gradient(to bottom right, red, yellow); //从左上角到右下角的线性渐变
background-image: linear-gradient(angle, color-stop1, color-stop2); // 使用角度语法
background-image: linear-gradient(-90deg, red, yellow); //带有指定的角度的线性渐变
background-image: linear-gradient(red, yellow, green); //带有多个颜色节点的从上到下的线性渐变
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); //如何创建一个带有彩虹颜色和文本的线性渐变
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));//从左到右的线性渐变,带有透明度
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); //repeating-linear-gradient() 函数用于重复线性渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);//CSS3 径向渐变语法
background-image: radial-gradient(red, yellow, green); //颜色节点均匀分布的径向渐变
background-image: radial-gradient(red 5%, yellow 15%, green 60%); //颜色节点不均匀分布的径向渐变
background-image: radial-gradient(circle, red, yellow, green);// 形状为圆形的径向渐变
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);//带有不同尺寸大小关键字的径向渐变 (
closest-side
farthest-side
closest-corner
farthest-corner
)
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);//一个重复的径向渐变
四.CSS3 文本效果
CSS3中包含几个新的文本特征。
- text-shadow(适用于文本阴影)eg:{text-shadow: 5px 5px 5px #FF0000;} 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:
- box-shadow (适用于盒子阴影)eg:{box-shadow: 10px 10px 5px #888888;}
- text-overflow(CSS3文本溢出属性指定应向用户如何显示溢出内容)
p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }
- word-wrap(允许长文本换行)eg:{word-wrap:break-word;}
- word-break(CSS3 单词拆分换行属性指定换行规则)
p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }
五.CSS3 字体
CSS3 @font-face 规则
使用 CSS3,当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>