在此前我们讲解的css课程中,课程内容是以css2版本为基础的,本章开始我们讲解css3版本的新特性。
在css2的时代,由于css的功能局限性,我们制作的很多网页效果都是利用一些取巧的方法,例如实现一个圆角的页面,我们需要把圆角的部分用图片代替,而制作动画效果,都需要使用JavaScript来完成的,这不仅增加了代码编写的难度,还降低了web开发人员的工作效率。
在css3中我们可以使用大量新增的属性,例如圆角,阴影,动画,形变等等,这让web开发便得更加简单。
通过border-radius属性,我们可以为一个元素设置圆角,代码如下所示。
1 .box{
2 width:200px;
3 height:200px;
4 border:1px solid red;
5 border-radius: 10px;
6 }
在上面的代码中,我们为一个宽度和高度都是200px的div设置了一个圆角效果,border-radius的值是圆角的半径。
我们可以将圆角的半径设置为50%,这样一个正方形的div元素就变成了一个圆形,如果是长方形的元素,就会变成椭圆形。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 border-radius: 50%;
6 }
可以使用四个值分别指定元素四个角的圆角半径,代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 border-radius: 10px 20px 30px 40px;
6 }
通过上面的代码,可以直观地看出,圆角设置的四个值分别对应的是左上,右上,右下,左下。
通过box-shadow属性,我们可以设置元素的阴影,代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 box-shadow: 10px 20px 10px blue;
6 }
从上面的代码我们可以看到box-shadow属性可以设置四个值,第一个值是阴影x轴的长度,第二个值是阴影y轴的长度,第三个值是阴影的模糊半径,第四个值是阴影的颜色。
css3提供了让元素形变的属性(transform),在transform后面添加不同的形变函数,就能实现不同的形变效果,常用的形变包括:旋转、缩放、位移;
通过rotate()函数可以实现元素形变的效果,示例代码如下所示。
1 .box{
2 width:200px;
3 height:200px;
4 margin:100px auto;
5 transform: rotate(45deg);
6 background-color: #00f;
7 }
在上面的代码中,我们通过rotate函数让元素顺时针旋转了45度(deg单位表示度)。我们也可以设置负的度数,例如:
1 .box{
2 transform: rotate(-45deg);
3 }
上面的代码可以让元素逆时针旋转45度。
通过scale()函数可以实现元素的缩放,示例代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 margin: 100px auto;
5 transform: scale(1.5);
6 background-color: #00f;
7 }
我们可以在scale函数中设置元素缩放的比例,1.5就是原基础之上1.5倍,原宽高是200px,缩放之后呈现出来的尺寸就是300px。
通过translate()函数可以实现元素的位移,示例代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 margin: 100px auto;
5 transform: translate(100px,200px);
6 background-color: #00f;
7 }
在translate()函数中,我们可以设置元素位移的x轴距离和y轴偏移量。
我们可以利用位移,将元素放置在页面水平和垂直居中的位置,代码如下所示
1 .box {
2 width: 200px;
3 height: 200px;
4 position: absolute;
5 top:50%;
6 left:50%;
7 transform: translate(-50%, -50%);
8 background-color: #00f;
9 }
这样通过绝对定位,配合位移,就可以将元素放置在水平和垂直都居中的位置上了。
按要求完成案例,要求如下
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。