CSS3概述
CSS3是原CSS技术的升级版本,新增了一些属性。对CSS3已完全向后兼容,所以不必改变现有的设计。浏览器将永远支持CSS2。在开发过程中应该考虑浏览器的支持问题。
一、CSS3 新增属性
(1)边框
(2)背景
(3)渐变效果
(4)文本
(5)2D
二、CSS3 新增属性详解
2.1 边框样式
笔记:
border: 1px solid rgba(0, 0, 0, 0.1)
设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。
其中,rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值(0-255)。
最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1,越接近 1,代表透明度越低。
2.1.1 圆角边框:border-radius
CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
例如:
border-radius: 15px;
表示同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px
这是一个简写属性,可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。
(1)border-top-left-radius:左上角
(2)border-top-right-radius:右上角
(3)border-bottom-left-radius:左下角
(4)border-bottom-left-radius:右下角
简写
border-radius值的个数以及每个值对应控制的位置:
border-radius 15px /*设置四个角的边界半径为15px*/
border-radius 15px 20px /*设置左上角和右下角的边界半径为15px,右上角和左下角为20px*/
border-radius 15px 20px 25px /*设置左上角的边界半径为15px,右上角和左下角为20px,右下角为25px */
border-radius 15px 20px 25px 30px /*设置左上角为15px,右上角为20px,右下角为25px,左下角为30px*/
2.1.2 图形边框:border-image
border-image 属性是一个简写属性,用于设置以下属性:
属性 | 描述 |
---|---|
border-image-source | 用在边框的图片的路径。 |
border-image-slice | 图片边框向内偏移。 |
border-image-width | 图片边框的宽度。 |
border-image-outset | 边框图像区域超出边框的量。 |
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
border-image:url(border-image.png) 40 10px 20px round;
/*其中border-image属性可以用以下一组属性代替*/
border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;
2.1.3 盒子阴影: box-shadow
语法:
box-shadow: h-shadow v-shadow blur spread color inset
属性 | 描述 |
---|---|
h-shadow | 必需。水平阴影的偏移量。允许负值。 |
v-shadow | 必需。垂直阴影的偏移量。允许负值。 |
blur | 可选。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。 |
spread | 可选。阴影的尺寸。取正值时,阴影扩大;取负值时,阴影收缩。默认为0。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 默认阴影在边框外。使用 inset 后,阴影在边框内(即使是透明边框),背景之上内容之下 |
box-shadow: 10px 10px 5px #888888;
盒子阴影效果的使用实例
(1)文字卡片
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
(2)图片效果
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
2.2 背景样式
2.2.1 background-size
background-size 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
/*给背景图片增加该属性之后,原图片会按照指定大小进行缩放*/
background-size:100px 100px;
/*给背景图片增加该属性之后,拉伸填充背景区域*/
background-size:40% 100%;
2.2.2 background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-origin: padding-box|border-box|content-box;
(1)padding-box
:背景图像相对于内边距框来定位
(2)border-box
:背景图像相对于边框盒来定位
(3)content-box
:背景图像相对于内容框来定位
2.2.3 background-image
CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
body
{
background-image:url(bg1.png),url(bg2.png);
}
2.3 渐变效果
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡2.3.1 linear-gradients
(1)线性渐变
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
background-image: linear-gradient(#e66465, #9198e5);
(2)从左到右的线性渐变:
background-image: linear-gradient(to right, red , yellow);
(3)线性渐变 - 对角
/*左上角到右下角*/
background-image: linear-gradient(to bottom right, red, yellow);
(4)从左到右的线性渐变,带有透明度:
/* rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:
0 表示完全透明,1 表示完全不透明。*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
(5)重复的线性渐变
repeating-linear-gradient()
函数用于重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
2.3.2 radial-gradient
(1)径向渐变
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red, yellow, green);
2.4 文本效果
2.4.1 text-shadow
(1)文本阴影效果
/* 水平阴影,垂直阴影,模糊的距离,以及阴影的颜色 */
color:#ffff00;
text-shadow: 5px 5px 5px red;
2.4.2 text-overflow
(1)文本溢出属性
text-overflow属性指定当文本溢出包含它的元素,应该发生什么
语法
text-overflow: clip | ellipsis | string;
(1)clip
:超出方框部分直接删除
(2)ellipsis
:超出方框部分显示省略号
(3)string
:超出方框部分显示指定的字符串
text-overflow: ellipsis
text-overflow: clip
其他新增文本属性不一一列出,需要的时候再去官网研究。
2.4.3 字体
使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户
在 CSS3 @font-face 规则中定义
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
2.5 2D效果
使用2D效果可以使得元素拥有旋转,倾斜等静态效果
语法
transform:translate() | rotate() | scale() | skew() | matrix()
2.5.1 translate()
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动,
/* 从左边元素移动50个像素,并从顶部移动100像素 */
transform: translate(50px,100px);
2.5.2 rotate()
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
/* 元素顺时针旋转30度 */
transform: rotate(30deg);
2.5.3 scale()
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
/* 转变宽度为原来的大小的2倍,和其原始大小3倍的高度 */
transform: scale(2,3)
2.5.4 skew()
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜
/*在X轴和Y轴上倾斜20度30度 */
transform: skew(30deg,20deg)
2.5.5 matrix()
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
总结:
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="1.png" alt="" width="284" height="213">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
</body>
</html>
效果: