CSS3体验入门

CSS3在样式上提供了非常丰富的选择，目前由于浏览器的问题，部分新的样式需要加载前缀才可以让不同的浏览器识别

Firefox：-moz-

Chrome：-webkit-

Opera：-o-  这个这个太萌了

Safari：-webkit-

IE：-ms-

Border

先说下新的边框样式，新的边框样式提供了可定制的圆角，阴影和图片边框的控制。先看一个简单的案例

div
{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 15px 2px 5px 3px;
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 20px 10px;
    border-bottom-left-radius: 30px 15px;
}

上面的代码描述了一个圆弧角的矩形，并且有阴影。圆弧角的值是x/y，x是水平半径，y是垂直半径，如果y不设置，那y=x。radius可以简写到一起

div
{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 15px 2px 5px 3px;
    border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px; 
}

来看下阴影

 div
 {
     width: 100px;
     height: 100px;
     border-style: solid;
     border-width: 15px 2px 5px 3px;
     box-shadow: -3px 3px 2px 2px rgb(10,20,30);
 }

值的格式分别为：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

xy值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边

投影方式默认是外阴影，如果要设置，必定是inset

div
{
    width: 100px;
    height: 100px;
    border: 12px solid blue;
    background-color: Orange;
    border-top-left-radius: 60px 90px;
    border-bottom-right-radius: 60px 90px;
    box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;
}

然后是边框图片，这个有点不直观

div
{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 15px 2px 5px 3px;
    -webkit-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;
    -moz-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;
}

上面的代码就是说，把图片按上右下左的次序（15px 3px 5px 3px 但不要写单位，默认就是px）切成9块，四个尖角切出的不动，其他都按宽高拉伸变形。

变形的参数有stretch/round/repeat/space，可以设置x y，也可以设x，那x=y了。

Backgrounds

css2对北京图片的处理是放置一个，平铺，x和y方向，现在我们可以选择新的背景图片大小的方式

div
{
    width: 530px;
    height: 330px;
    background-image: url(http://www.witshare.org/css/images/mm_light.png);
    background-size:cover;
    background-repeat:no-repeat;
}

使用size可以让图片适应元素的大小：cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，

contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这两种方法都会使用图片失真。

还可以定位背景的位置区域

div
{
    width: 100px;
    height: 100px;
    padding: 20px;
    border: solid 30px red;
    background-color: Lime;
    background-image: url(http://www.witshare.org/css/images/mm_light.png);
    background-repeat: no-repeat;
    -moz-background-origin: padding;
    -webkit-background-origin: padding;
    -moz-background-origin: padding-box;
    -webkit-background-origin: padding-box;
    -o-background-origin: padding-box;
    background-origin: padding-box;
}

以上的特性可以多个图片来源重叠，下面的案例描述了如何把三张牌叠放到一起的（为什么我每次都用牌来做案例呢？）

div
{
    width: 300px;
    height: 300px;
    background-image: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);
    background-repeat: no-repeat;
    background-position: 0px 0px,3px 20px,6px 40px;
    background-origin: content-box;
}

Text

看看下demo

span
{
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

阴影的参数是  x轴  y轴  模糊度 颜色

换行就是一个：在边界内换行

文本溢出的话有两个值 clip：不显示省略标记（…），而是简单的裁切。ellipsis：当对象内文本溢出时显示省略标记（…）

Font

以前我们尽量用标准字体，应为考虑到客户端没有安装我们设计用的字体，现在css3开始支持在线字体了

以下应用了google的一个很漂亮的字体

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
    span
    {
        font-family: 'Tangerine' , serif;
        font-size: 48px;
    }
</style>

关于google更多的字体可以看下Google Web Fonts

Transforms

汽车人，变形出发。css3开始支持2D的变形啦

下面的代码描述了如何顺时针旋转

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
}

下面是沿xy轴移动，可以通过translateX/y来个体设定

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: translate(10px,100px);
    -ms-transform: translate(10px,100px);
    -webkit-transform: translate(50px,100px);
    -o-transform: translate(10px,100px);
    -moz-transform: translate(10px,100px);
}

缩放，缩放的值是倍数，以下代码得到200*100的矩形，同样可以通过scalex/y来各自细化值

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: scale(2,1);
    -ms-transform: scale(2,1);
    -webkit-transform: scale(2,1);
    -o-transform: scale(2,1);
    -moz-transform: scale(2,1);
}

扭曲通过描述xy上的角度来变形，同样可以xy细化

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: skew(10deg,20deg);
    -ms-transform: skew(10deg,20deg);
    -webkit-transform: skew(10deg,20deg);
    -o-transform: skew(10deg,20deg);
    -moz-transform: skew(10deg,20deg);
}

矩阵变形，通过6个值完全重新定位元素

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}

换变形中心点

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transform: rotate(45deg);
    transform-origin: 20% 40%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 20% 40%;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 20% 40%;
    -moz-transform: rotate(45deg);
    -moz-transform-origin: 20% 40%;
    -o-transform: rotate(45deg);
    -o-transform-origin: 20% 40%;
}

也可以对一个变形动作给出时间和事件控制。

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。

值的变换速率有6个可能值
ease逐渐变慢  0.25, 0.1, 0.25, 1.0
linear  匀速 0.0, 0.0, 1.0, 1.0
ease-in  加速 0.42, 0, 1.0, 1.0
ease-out 减速 0, 0, 0.58, 1.0
ease-in-out 加速然后减速  0.42, 0, 0.58, 1.0
cubic-bezier

transition-delay是用来指定一个动画开始执行的时间,意思是当改变元素属性值后多长时间开始执行transition效果

下面是一个简单的案例

div
{
    width: 100px;
    height: 100px;
    background-color: Orange;
    transition: width 2s, height 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;
}
div:hover
{
    width: 200px;
    height: 200px;
    background-color:Blue;
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

以下的代码描述了不同的加速情况

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title></title>
    <style>
        box
        {
            border: 1px solid #ccc;
            padding: 10px;
            height: 400px;
            width: 400px;
        }
        .transition-demo
        {
            width: 100px;
            height: 100px;
            border: 12px solid blue;
            background-color: Orange;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;
            text-align: center;
            line-height: 50px;
            text-align: center;
            color: #fff;
            margin-bottom: 10px;
        }
        #ease
        {
            -moz-transition: all 5s ease 0.3s;
            -webkit-transition: all 5s ease 0.3s;
            -o-transition: all 5s ease 0.3s;
            transition: all 5s ease 0.3s;
            background: #f36;
        }
        #ease-in
        {
            -moz-transition: all 3s ease-in 0.5s;
            -webkit-transition: all 3s ease-in 0.5s;
            -o-transition: all 3s ease-in 0.5s;
            transition: all 3s ease-in 0.5s;
            background: #369;
        }
        #ease-out
        {
            -moz-transition: all 5s ease-out 0s;
            -webkit-transition: all 5s ease-out 0s;
            -o-transition: all 5s ease-out 0s;
            transition: all 5s ease-out 0s;
            background: #636;
        }
        #ease-in-out
        {
            -moz-transition: all 1s ease-in-out 2s;
            -webkit-transition: all 1s ease-in-out 2s;
            -o-transition: all 1s ease-in-out 2s;
            transition: all 1s ease-in-out 2s;
            background: #3e6;
        }
        #linear
        {
            -moz-transition: all 6s linear 0s;
            -webkit-transition: all 6s linear 0s;
            -o-transition: all 6s linear 0s;
            transition: all 6s linear 0s;
            background: #999;
        }
        #cubic-bezier
        {
            -moz-transition: all 4s cubic-bezier 1s;
            -webkit-transition: all 4s cubic-bezier 1s;
            -o-transition: all 4s cubic-bezier 1s;
            transition: all 4s cubic-bezier 1s;
            background: #6d6;
        }
        #box.timings-demo-hover .transition-demo, #box:hover .transition-demo
        {
            -moz-transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
            background: #369;
            border: 1px solid rgba(255,230,255,08);
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            margin-left: 280px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="linear" class="transition-demo">
            匀速</div>
        <div id="ease" class="transition-demo">
            逐渐变慢</div>
        <div id="ease-in" class="transition-demo">
            加速</div>
        <div id="ease-out" class="transition-demo">
            减速</div>
        <div id="ease-in-out" class="transition-demo">
            加速然后减速</div>
        <div id="cubic-bezier" class="transition-demo">
            自定义</div>
    </div>
</body>
</html>

当然css3也提供了真正的动画处理方式Animation，Animation和其他很多动画技术一样，采用的是关键帧Keyframes，但控制比较多，下次我独立写一个关于css动画的吧。

Columns

我们有讨论过说，web页面就是文档，文档上的元素布局是非常重要的，往往我们需要对文字进行竖排布局，现在css3开始支持了。不过IE9不支持。

css的columns支持多列，列边距，列边框和夸列，下面的代码描述了这些实现

<head>
    <title></title>
    <style type="text/css">
        article
        {
            -moz-column-count: 5;
            -webkit-column-count: 5;
            column-count: 5;
            -moz-column-width: auto;
            -webkit-column-width: auto;
            column-width: auto;
            -webkit-column-gap: 5px;
            -moz-column-gap: 5px;
            column-gap: 5px;
            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            column-gap: 20px;
            -moz-column-rule: 5px solid red;
            -webkit-column-rule: 5px solid red;
            column-rule: 5px solid red;
        }
        h1
        {
            background: orange;
            border-bottom: 3px double;
            margin: 5px 0;
            -webkit-column-span: all;
            -moz-column-span: all;
            column-span: all;
        }
    </style>
</head>
<body>
    <article>
        <h1>
            计算机专业不好吗？</h1>
        <p>
        计算机专业曾经是考大学最热门的专业之一——你想啊，现在我们已经进入信息社会，
        计算机技术已经渗透到我们工作和生活的各个角落，而且，人类社会的发展也要建立在计算机技术大发展的基础之上，
        这个专业当然应该是很有前景的！然而，由于前几年计算机和软件相关专业的招生量急剧膨胀，
        高校的师资和其他相关资源的瓶颈制约了对计算机人才的培养。就我们的调查来看，
        很多高校老师都没有真正的企业实践经验，所以往往把一些专业课和基础课上得很“枯燥”，
        理论阐述太多、实践动手很少、课程门类开得太多、技术之间的联系讲得太少，学生的学习兴趣提不起来。
        因此，企业对于大学毕业生也不太“感冒”，认为大学生眼高手低、知识和技能滞后、什么都不会做！
        其实，很多计算机专业的学生都有和你一样的痛苦，你不是一个人在苦恼！我们认为，不是专业出了问题，
        而是专业人才的教育和训练出了问题。最近几年，中国企业对软件人才的需求量每年都在以30%以上的速度增长，
        很多企业求才若渴：软件业的大学生，入职薪资就要比平均薪资高20%，
        而且一般过三～五年，月薪就能实现翻两番达到万元以上！
        除了计算机，还有哪个行业的薪资增长有这样的速度？
        </p>
    </article>
</body>

CSS的简单入门就到这里了，休息一下，以后有机会继续深入讨论下