1.什么是CSS
CSS 用于控制网页的样式和布局.
2.CSS3 模块
CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。
一些最重要CSS3模块如下:
1.选择器
2.盒模型
3.背景和边框
4.文字特效
5.2D/3D转换
6.动画
7.多列布局
8.用户界面
3.CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序
1.border-radius
2.box-shadow
3.border-image
4.CSS3 圆角
在 CSS3 中 border-radius 属性被用于创建圆角:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{width:200px; heoght:200px;
border: blank solid
border-radius:50%;
}
<style/>
</head>
<body>
<div class="box"><div/>
</body>
</html>
5.CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影:
6.CSS3 边界图片
有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:
border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:
在 div 中使用图片创建边框:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
}
7.CSS3 border-radius 属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
1.四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
2.三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
3.两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
4.一个值: 四个圆角值相同
8.CSS3 圆角属性
border-top-left-radius | 定义了左上角的弧度 |
border-top-right-radius | 定义了右上角的弧度 |
border-bottom-right-radius | 定义了右下角的弧度 |
border-bottom-left-radius | 定义了左下角的弧度 |
9.CSS3 背景
CSS3 中包含几个新的背景属性,提供更大背景元素控制。
1.background-image
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
2.background-size
指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
3.background-origin
background-origin 属性指定了背景图像的位置区域
4.background-clip
背景剪裁属性是从指定位置开始绘制。