CSS3基础
内容：
1.圆角 border-radius
2.阴影 text-shadow、box-shadow
3.渐变 linear、radial
4.rgba rgb+alpha opacity
5.transform
6.动画 transition、animation
1.圆角 border-radius
通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形：
(1)只设置一个值
只设置一个值得情况常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度
.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采用的是左上角、右上角、右下角、左下角的顺序
.box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px 20px 30px 40px;}
效果：
(3)省略部分值
与padding和margin一样，border-radius同样可以省略部分值，省略时同样是采用对角线相等的原则
.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作为单位外还可以使用百分比：
.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)实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:300px; height:300px; background:#CCC; margin:10px auto 0; text-shadow:5px 50px 1px red; box-shadow: 5px 50px 5px red}
</style>
</head>
<body>
<div class="box">这是一些字</div>
</body>
</html>
效果：
3.渐变 linear、radial
注意：渐变其实本质上是图片
(1)从上到下的线性渐变
.box {
width:300px; height:300px; margin:10px auto 0;
/*background-image:-webkit-linear-gradient(red, green);*/
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
效果：
(2)线性渐变 - 从左到右
.box {
width:300px; height:300px; margin:10px auto 0;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
效果：
(3)线性渐变 - 对角
.box {
width:300px; height:300px; margin:10px auto 0;
/* 从左上角开始（到右下角）的线性渐变 */
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
效果：
(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)实例
body {background:#F0F}
.box {
width:300px; height:300px; margin:10px auto 0; color:white;
background:rgba(0,0,0,0.1);
/*opacity: 0.5;*/
}
说明：此时box中的文字没有变透明，但是如果把opacity的注释去掉那么文字就会变透明
5.transform
(1)transform作用
- rotate 旋转
- scale 缩放
- translate 平移(移动端特别爱用translate)
- skew 倾斜
**transform一定要加初始值
(2)实例
/* CSS3写法 */
transform: rotate(90deg); /* 兼任写法如下 */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* rotate 旋转 */
.box {
width: 300px;
height: 300px;
background: #CCC;
margin: 100px auto 0;
transition: 1s all ease; /* transition指定过渡效果 */
transform: rotate(0deg);
} .box:active {
transform: rotate(90deg);
}
/* scale 缩放 */
.box {
width: 300px;
height: 300px;
background: #CCC;
margin: 100px auto 0;
transition: 1s all ease;
transform: scale(1, 1);
} .box:active{transform:scale(2,2);} /* 沿x轴y轴均放大两倍 */
.box:active{transform:scale(1,0);} /* 沿y轴缩小直至不见 */
.box:active { /* 翻转 */
transform: scale(1, -1);
}
/* translate 平移 */
.box {
width: 300px;
height: 300px;
background: #CCC;
margin: 100px auto 0;
transition: 1s all ease;
transform: translate(0, 0);
} .box:active {
transform: translate(100px, 200px); /* 向右平移100px 向下平移200px*/
}
/* skew 倾斜 */
.box {
width: 300px;
height: 300px;
background: #CCC;
margin: 100px auto 0;
transition: 1s all ease;
transform: skew(0, 0);
} .box:active {
transform: skew(0, 30deg); /* 倾斜30度 */
}
(3)补充
多个transform一起用：
.box {
width: 200px;
height: 200px;
background: #CCC;
margin: 100px auto 0;
}
/* 下面两种写法显示效果不一样 */
/* 多个一起用的时候transform会从后往前走 先执行后面的 再执行前面的 */
.box:active {
transform: scale(2, 1) rotate(45deg)
}
.box:active {
transform: rotate(45deg) scale(2, 1)
}
3D变化：
2d 3d
rotate rotateX/rotateY/rotateZ
translate translateX/translateY/translateZ
.box {
width:200px; height:200px; background:#CCC; margin:100px auto 0;
transition: 1s all ease;
/* perspective -> 相当于定义景深 然后可以产生透视 出现3D效果 这个值越小3D效果越明显 */
transform:perspective(1000px) rotateX(0);
}
.box:active {transform:perspective(1000px) rotateX(60deg);}
6.动画 transition、animation
两者区别：
- transition 简单、容易、方便 常用
- animation 强大、麻烦 复杂的链式动画
(1)transition
兼容性：
IE10、Firefox、Chrome、Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Chrome 25 以及更早版本需要前缀 -webkit-。
IE9 以及更早版本不支持 transition 属性
语法：
transition:
1.动画时间
2.改变的样式
3.动画形式 eg: transition: 1s all ease
当然也可以分别指定动画要改变的样式：transition: 2s width ease, 1s height ease 动画形式：
ease ：慢速开始，中间变快，慢速结束
liner：匀速运动
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始，慢速结束
实例：
.box {
width: 200px;
height: 200px;
background: #CCC;
margin: 100px auto 0;
transition: 1s all ease; /* 动画发生1s */
}
.box:active {width:400px; height:400px; background:yellow; font-size:30px;}
(2)animation
animation使用：先定义一个animation然后使用
详细使用看这里：https://blog.csdn.net/u013243347/article/details/79976352
当然animation也可以和js配合起来一起操作动画
CSS3基础的更多相关文章
- css3基础教程：CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- css3基础教程十六变形与动画animation
前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...
- CSS3 基础知识
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3 基础知识[转载minsong的博客]
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3基础知识
CSS3基础 1 样式表的使用 1.内联样式表. 只影响单个元素,常用于标签. <p style="color: aqua;font-size: 20px">This ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
- CSS3基础入门02
CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
- h5、css3基础
一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...
- CSS3基础入门01
CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
随机推荐
- C语言SQLite3基本操作Demo
/************************************************************************** * C语言SQLite3基本操作Demo * 声 ...
- 【opencv基础】linux系统opencv以及opencv_contrib的安装与使用
前言 本文主要介绍如何在linux系统安装使用opencv. 具体步骤可参考opencv官网here. 步骤 编译源码之前需要安装相关依赖库: 1.下载源码: 2.解压源码: 3.配置cmake: 注 ...
- 关于递归函数中的return位置
1.对于求是否有解的问题一般使用bool dfs() 其中return 可以放在递归式后面 2.对于需要更新解的问题一般使用int dfs() 其中return 不能放在递归式后面,必须放在函数最 ...
- cf 557D 二分图黑白染色
题意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种 奇环和偶环其实就是二分图的性质:二分图不存在奇环,所以只要判断这张图是否是二分图就行了: 如果本身就不是二 ...
- HTML标签 select 里 动态添加option
HTML标签 select 里 动态添加option: ☆ var today = new Date(); var yearNow = today.getFullYear(); var optiong ...
- day9 python学习 文件的操作 读 写 seek
文件的操作 1 文件的打开操作: 文件句柄 = open('文件路径', '模式') f=open('wangyakun','a+',encoding='utf-8') #文件名, 如果是绝对路径 ...
- KindEditor 上传文件 在Asp.net中的使用
以前一直用FCK编辑器,因为配置比较简单,但是发现Kindeditor这个编辑器更加好看,更加灵活,就用了下. 但是发现在上传文件的时候,出现了大问题,弄了我好久的时间,为了记录下,或许能帮助到您,共 ...
- 使用 Python 连接到 PADS Layout
使用 Python 连接到 PADS Layout PADS Layout 使用的是 VBA 编程,很多人说 VBA 很简单,但是实在学不会,可能是太笨了. 后来发现 PADS Layout 有 CO ...
- Digester库使用总结
1.Digester是Apache软件基金会的Jakarta项目下的子Commons项目下的一个开源项目,Digester API包含3个包:org.apache.commons.digester,提 ...
- java中原子操作的实现分析
一.CAS原理: CAS的全程即Compare And Swap,翻译成中文为比较并交换: CAS操作依赖于CPU指令CMPXCHG来实现比较并交换操作的原子性,通过查看HotSpot源码如下: 可以 ...