matrix
CSS3
1. 圆角
border-radius:边框圆角的圆角半径
四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值:第一个值为左上角与右下角,第二个值为右上角与左下角
一个值:四个圆角值相同
2.图片
border-image:有了CSS3的border-image属性,你可以使用图像创建一个边框:border-image属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:
border-image-source:用于指定要用于绘制边框的图片的位置;
border-image-slice:图像边界向内偏移;
border-image-width:图像的边界的宽度;
border-image-outset:用于指定在边框外部绘制 border-image-area 的量;
border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮。
3.阴影
box-shadow:边框阴影。例如 box-shadow: 50px 50px 5px #888888 第一个50px是指阴影距离边框的左右距离,值也可以是负的,向右为正,向左为负。第二个 50px是指阴影边距离边框的上下距离,值也可以是负的,向下为正,向上为负。5px是距离上一个<div>的距离,距离越远,阴影面积就越大,也会越模 糊。#888888是指阴影的颜色。
4.背景
background-image 添加背景图片。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
background-size 指定背景图像的大小。CSS3中可以指定背景图片,可以在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。指定的大小是相对于父元 素的宽度和高度的百分比的大小。
background-Origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip 背景剪裁属性是从指定位置开始绘制
5.渐变
渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
线性渐变:(Linear Gradients)- 向下/向上/向左/向右/对角方向
例如:
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
上面代码表示从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
径向渐变:(Radial Gradients)- 由它们的中心定义
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
shape: 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值:
closest-side
farthest-side
closest-corner
farthest-corner
6.文本效果
text-shadow:文本阴影。 text-shadow: 5px 5px 5px #FF0000 和边界阴影效果相同
box-shadow:盒子阴影 box-shadow: 10px 10px 5px grey
text-overflow:文本溢出
word-wrap:break-word;文本换行
Word Breaking:指定换行规则
7.字体
CSS3中,设计网页时可以使用任意字体,在使用之前必须首先定义字体的名称(比如 myFirstFont),然后再通过 font-family 属性来引用字体的名称 (myFirstFont)。
8. 2D转换
2D转换是指可以移动,比例化,反过来,旋转,和拉伸元素。2D转换的方法有:
translate(); translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
例如 <div style="width:300px;height:100px; -webkit-transform:translate(100px,100px)">表示向右方、下方各移动了100px。
rotate(); rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
例如 <div style="width:300px;height:100px; -webkit-transform:rotate(30deg)">表示顺时针倾斜了30度。
scale(); scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
例如 <div style="width:300px;height:100px; -webkit-transform:scale(2,3)"> 表示x轴扩大了2倍,y轴扩大了3倍。
skew(); skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:
例如 <div style="width:300px;height:100px; -webkit-transform:skew(30deg,20deg);"> 表示绕X轴和Y轴周围20度30度的元素。
matrix(); matrix方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
例如 <div style="width:300px;height:100px; -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);"> 表示利用matrix()方法旋转div元素30°
9. 3D转换
rotateX(); 围绕其在一个给定度数X轴旋转的元素。
例如 <div style="width:300px;height:100px; -webkit-transform: rotateX(60deg);"></div> 表示围绕X轴旋转60度,好比60度时在X平面的投影。
rotate(Y) 和 rotateX() 效果一样
10.过渡
过渡是元素从一种样式逐渐改变为另一种的效果。
例如 <div style="width:300px;height:100px; -webkit-transition: width 2s;">如果未指定的期限,transition将没有任何效果,因为默认值是0。指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:
过渡效果代码未打出
要添加多个样式的变换效果,添加的属性由逗号分隔:
{-webkit-transition: width 2s, height 2s, -webkit-transform 2s;}
11.动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。要创建CSS3动画,你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
改变背景色和位置:
-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
12.多列
column-count
属性指定了需要分割的列数。-webkit-column-count: 3;表示将 <div> 元素中的文本分为 3 列。
column-gap
属性指定了列与列间的间隙。-webkit-column-gap: 40px;表示列与列之间的距离是40像素。
column-rule-style
属性指定了列与列间的边框样式:-webkit-column-rule-style: solid;表示列与列之间是实线。
column-rule-width
属性指定了两列的边框厚度:-webkit-column-rule-width:10px; 表示列与列之间实线的宽度是10px
column-rule-color
属性指定了两列的边框颜色
column-rule
属性是 column-rule-* 所有属性的简写。-webkit-column-rule: 1px solid lightblue;表示列之间的边框的厚度,样式及颜色。
-webkit-column-span表示指定元素跨多少列。h2{-webkit-column-span: all;}表示标题h2跨越多有的列。
column-width
属性指定了列的宽度。-webkit-column-width: 100px;表示列的宽度为100px。
13.用户界面
resize属性指定一个元素是否应该由用户去调整大小。div{ resize:both; overflow:auto;} 表示这个 div 元素由用户调整大小。
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。-moz-box-sizing: border-box;width:50%; float:left; 表示div分成了2个,各占50%。
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。div
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
上面代码表示边框边缘之外 15 像素处的轮廓。
14.图片
椭圆形图片:border-radius: 50%; 圆角为边界的50%时,图片就变成了椭圆。
略缩图:使用 border
属性来创建缩略图
影响式图片:响应式图片会自动适配各种尺寸的屏幕。 如果你需要*缩放图片,且图片放大的尺寸不大于其原始的最大值,则可使用以下代码:
img {
max-width: 100%;
height: auto;
}
图片文本:可以将文本写在图片的左上角、左下角、右上角、右下角、居中。(代码未写出)
卡式图片:
图片滤镜: filter
属性用为元素添加可视效果 (例如:模糊与饱和度) 。-webkit-filter: grayscale(100%);表示修改所有图片的颜色为黑白 (100% 灰度)。
响应式图片相册:
图片Modal(模态):
15.按钮
按钮颜色: background-color
.button1 {}
按钮大小:font-size .button1 {font-size: 10px;}
图角按钮: border-radius
.button5 {border-radius: 50%;}
按钮边框颜色: border
border: 2px solid #4CAF50;
鼠标悬停按钮:可以使用hover
选择器来修改鼠标悬停在按钮上的样式。
效果速度:transition-duration
-webkit-transition-duration: 0.4s;表示效果速度是0.4s。
.button:hover {
color: white;
}
上面代码表示按钮的颜色是白色,当把鼠标放在按钮上0.4s以后,按钮变成#4CAF50(绿色)。
按钮阴影: box-shadow 表示鼠标放在按钮上以后按钮会显示阴影。
禁用按钮:opacity
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
上面代码表示禁用按钮,鼠标放在按钮上以后显示一个禁用的图片(not-allowed)。
按钮宽度:width
button1 {width: 250px;} 表示宽度为250px的按钮。 button2 {width: 50%;} 宽度为50%的按钮。
按钮组:移除外边距并添加 float:left
来设置按钮组: button { float: left;}
按钮动画:
16.分页
简单分页:
圆角样式:border-radius
鼠标悬停过渡效果: transition
圆角边框:
分页间隔: margin
分页字体大小:font-size
居中分页:在容器元素上 (如 <div>) 添加 text-align:center 样式