CSS3
1. 一些最重要CSS3模块如下:
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
2. 边框
- border-radius
- box-shadow
- border-image(Internet Explorer 10 及更早的版本不支持 border-image 属性。)
3. 圆角
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
4.背景
- background-image 不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
- background-size 指定背景图像的大小,相对于父元素的宽度和高度的百分比的大小。
3.background-Origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
- background-clip 背景剪裁属性是从指定位置开始绘制
div {
background-clip: border-box|padding-box|content-box;
}
5.渐变
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
6. 文本效果
阴影效果(可以实现卡片效果)
text-shadow
box-shadow
文本溢出属性指定应向用户如何显示溢出内容
text-overflow: clip | ellipsis
自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字
word-wrap
word-break
7. 字体
@font-face
CSS
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
8. 2D/3D 转换
9. 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
10.动画属性
@keyframe,使用前需要定义动画的名称
“`css
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
“`
11. CSS 多列
column-count 需要分割的列数
还可以指定间隙、边框、宽度
12. 弹性盒模型
弹性容器通过设置 display 属性的值为 flex 或inline-flex将其定义为弹性容器。
13. 多媒体查询
@media