首页 > 代码库 > CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）
CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）
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 样式
CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）