CSS3在样式上提供了非常丰富的选择，目前由于浏览器的问题，部分新的样式需要加载前缀才可以让不同的浏览器识别
Firefox：-moz-
Chrome：-webkit-
Opera：-o-
Safari：-webkit-
IE：-ms-
Border
先说下新的边框样式，新的边框样式提供了可定制的圆角，阴影和图片边框的控制。先看一个简单的案例
CSS
{
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可以简写到一起
CSS
div
{
width: 100px;
height: 100px;
border-style: solid;
border-width: 15px 2px 5px 3px;
border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px;
}
来看下阴影
CSS
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
CSS
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;
}
边框图片是CSS3中非常有用的一个修饰，虽然初学者感觉有点不直观
JavaScript
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方向，现在我们可以选择新的背景图片大小的方式
CSS
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将图片缩小到适合容器大小为止，这两种方法都会使用图片失真。
还可以定位背景的位置区域
CSS
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;
}
以上的特性可以多个图片来源重叠，下面的案例是在我开发的棋牌类游戏中实现如何把三张牌叠放到一起的
CSS
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
CSS
span
{
text-shadow: 5px 5px 5px #FF0000;
word-wrap: break-word;
text-overflow: ellipsis;
}
阴影的参数是 x轴 y轴 模糊度 颜色
换行就是描述：在边界内换行
文本溢出的话有两个值 clip：不显示省略标记（...），而是简单的裁切。ellipsis：当对象内文本溢出时显示省略标记（...）
Font
以前我们尽量用标准字体，因为要考虑到客户端没有安装我们设计用的字体，现在css3开始支持在线字体了
以下应用了google的一个很漂亮的字体
CSS
<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的变形啦
下面的代码描述了如何顺时针旋转
CSS
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来个体设定
CSS
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来各自细化值
CSS
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细化
CSS
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个值完全重新定位元素
CSS
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);
}
换变形中心点
CSS
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效果
下面是一个简单的案例
CSS
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);
}
以下的完整代码描述了不同的加速情况
HTML
<!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支持多列，列边距，列边框和夸列，下面的代码描述了这些实现
HTML
<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>
|
上一篇
下一篇
All Rights Reserved