CSS3基础

时间 2019-11-13

标签 css3 css 基础栏目 CSS 繁體版

原文原文链接

内容：css

1.圆角 border-radius html

2.阴影 text-shadow、box-shadow css3

3.渐变 linear、radialweb

4.rgba rgb+alpha opacity动画

5.transformspa

6.动画 transition、animation.net

1.圆角 border-radius 3d

经过设置元素的border-radius值，能够轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各类圆角图形：code

(1)只设置一个值orm

只设置一个值得状况经常使用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，便可给元素的四个边角设置统一的圆角弧度

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px;}

效果：

(2)四个方向的值分别设置

border-radius属性实际上是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，所以，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;

这里要注意四个数值的书写顺序，不一样于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px 20px 30px 40px;}

效果：

(3)省略部分值

与padding和margin同样，border-radius一样能够省略部分值，省略时一样是采用对角线相等的原则

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px 40px;}

效果：

(4)横向纵向分开写

border-radius还能够用/分为横向和纵向这样写：

.box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px/50px;}

效果：

(5)百分比

除了像上面用px做为单位外还可使用百分比：

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:50%;}

效果：

2.阴影 text-shadow、box-shadow

text-shadow：向文本添加一个或多个阴影
box-shadow：向框添加一个或多个阴影

(1)语法

text-shadow：x-shadow y-shadow distance color
box-shadow：x-shadow y-shadow distance size color inset/outset

注：x-shadow和y-shadow均是必需的，其余可选，x-shadow y-shadow分别表示水平和垂直方向

(2)实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style media="screen">
 7         .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; text-shadow:5px 50px 1px red; box-shadow: 5px 50px 5px red}
 8     </style>
 9 </head>
10 <body>
11 <div class="box">这是一些字</div>
12 </body>
13 </html>

效果：

3.渐变 linear、radial

注意：渐变其实本质上是图片

(1)从上到下的线性渐变

1 .box {
2     width:300px; height:300px; margin:10px auto 0;
3     /*background-image:-webkit-linear-gradient(red, green);*/
4     background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
5     background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
6     background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
7     background: linear-gradient(red, blue); /* 标准的语法 */
8 }

效果：

(2)线性渐变 - 从左到右

1 .box {
2     width:300px; height:300px; margin:10px auto 0;
3     background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
4     background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
5     background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
6     background: linear-gradient(to right, red , blue); /* 标准的语法 */
7 }

效果：

(3)线性渐变 - 对角

1 .box {
2     width:300px; height:300px; margin:10px auto 0;    
3     /* 从左上角开始（到右下角）的线性渐变 */
4     background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
5     background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
6     background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
7     background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
8 }

效果：

(4)更多渐变

更多渐变看此：http://www.runoob.com/css3/css3-gradients.html

4.rgba opacity

(1)二者区别

RGBA 和 opacity 都能实现透明效果，可是二者有明显不一样的区别，区别以下：

rgba：RGAB实现透明效果，只改变元素自己的透明效果，文字没有变透明，另外rgba实际上就是 rgb(颜色)+alpha(透明度。取值0-1之间)
opacity：元素透明其子元素也都透明，如：div在红色背景透明度为0.5因而div里的文字也变得透明

(2)实例

1 body {background:#F0F}
2 .box {
3     width:300px; height:300px; margin:10px auto 0; color:white;
4     background:rgba(0,0,0,0.1);
5     /*opacity: 0.5;*/
6 }

说明：此时box中的文字没有变透明，可是若是把opacity的注释去掉那么文字就会变透明

5.transform

(1)transform做用

rotate 旋转
scale 缩放
translate 平移(移动端特别爱用translate)
skew 倾斜

**transform必定要加初始值

(2)实例

1 /* CSS3写法 */
2 transform: rotate(90deg);
3 
4 /* 兼任写法以下 */
5 -webkit-transform: rotate(90deg);
6 -moz-transform: rotate(90deg);
7 -o-transform: rotate(90deg);
8 -ms-transform: rotate(90deg);

 1 /* rotate 旋转 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;    /* transition指定过渡效果 */
 8     transform: rotate(0deg);
 9 }
10 
11 .box:active {
12     transform: rotate(90deg);
13 }

 1 /* scale 缩放 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: scale(1, 1);
 9 }
10 
11 .box:active{transform:scale(2,2);}    /* 沿x轴y轴均放大两倍 */
12 .box:active{transform:scale(1,0);}    /* 沿y轴缩小直至不见 */
13 .box:active {                           /* 翻转 */
14     transform: scale(1, -1);
15 }

 1 /* translate 平移 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: translate(0, 0);
 9 }
10 
11 .box:active {
12     transform: translate(100px, 200px);    /* 向右平移100px  向下平移200px*/
13 }

 1 /* skew 倾斜 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: skew(0, 0);
 9 }
10 
11 .box:active {
12     transform: skew(0, 30deg);      /* 倾斜30度 */
13 }

(3)补充

多个transform一块儿用：

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     background: #CCC;
 5     margin: 100px auto 0;
 6 }
 7 
 8 /* 下面两种写法显示效果不同 */
 9 /* 多个一块儿用的时候transform会从后往前走 先执行后面的 再执行前面的 */
10 .box:active {
11     transform: scale(2, 1) rotate(45deg)
12 }
13 
14 .box:active {
15     transform: rotate(45deg) scale(2, 1)
16 }

3D变化：

1 2d              3d
2 rotate          rotateX/rotateY/rotateZ
3 translate       translateX/translateY/translateZ

1 .box {
2     width:200px; height:200px; background:#CCC; margin:100px auto 0;
3     transition: 1s all ease;
4     /* perspective -> 至关于定义景深 而后能够产生透视 出现3D效果 这个值越小3D效果越明显 */
5     transform:perspective(1000px) rotateX(0);
6 }
7 .box:active {transform:perspective(1000px) rotateX(60deg);}

6.动画 transition、animation

二者区别：

transition 简单、容易、方便经常使用
animation 强大、麻烦复杂的链式动画

(1)transition

兼容性：

1 IE十、Firefox、Chrome、Opera 支持 transition 属性。
2 Safari 须要前缀 -webkit-。
3 Chrome 25 以及更早版本须要前缀 -webkit-。
4 IE9 以及更早版本不支持 transition 属性

语法：

 1 transition: 
 2 1.动画时间
 3 2.改变的样式
 4 3.动画形式
 5 
 6 eg: transition: 1s all ease
 7 固然也能够分别指定动画要改变的样式：transition: 2s width ease, 1s height ease
 8 
 9 动画形式：
10 ease ：慢速开始，中间变快，慢速结束
11 liner：匀速运动
12 ease-in：慢速开始
13 ease-out：慢速结束
14 ease-in-out：慢速开始，慢速结束

实例：

1 .box {
2     width: 200px;
3     height: 200px;
4     background: #CCC;
5     margin: 100px auto 0;
6     transition: 1s all ease;   /* 动画发生1s */
7 }
8 
9 .box:active {width:400px; height:400px; background:yellow; font-size:30px;}

(2)animation

animation使用：先定义一个animation而后使用

详细使用看这里：http://www.javashuo.com/article/p-srziahvd-bp.html

固然animation也能够和js配合起来一块儿操做动画