css3特性简要概括
---恢复内容开始---
css3新增核心知识
背景和边框
文本效果
2d/3d转换
过渡和动画
多列布局
弹性盒模型
媒体查询
增强选择器
css3浏览器兼容性
css3在线工具
css3generator
http://css3generator.com/
https://www.colorzilla.com/gradient-editor/
https://css-tricks.com/examples/ButtonMaker/
border-radius:15px 25px 35px 45px;
左上角，右上角，右下角，左下角
css3阴影：
box-shadow:h-shadow v-shadow blur color
设置背景图片：
background-image(允许设置多个背景图片)
clip
origin
size
background-image:url(shixun.png),url(bg.png);
position:right top,left top
repeat:no-repeat,repeat
origin
文本：
text-shadow
word-wrap:换行 break-word 强制换行
text-overflow :设置文本内容溢出时控制规则
word-break
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
css3 选择器
https://www.caniuse.com/
新增选择器：
属性选择器 [^:开头 $结尾 ~其中有一个]
伪类选择器：first-child nth-child(1) first-of-type 匹配同类型中的第一个同级兄弟元素E
伪元素选择器：:: 已经不局限使用样式选择器，对内容进行操作
E::before 配合content使用
E::after 配合content使用
E::first-letter 第一个字母
E::first-line 设置元素第一行的样式
E::selection 设置元素被选中的样式
2019/7/17
css3 过渡：将元素从一种状态转变为另一种状态（简单的动画效果）
transition-property 设置过渡属性（效果）
transition-duration 设置过渡效果持续时间（n ms内完成）
transition-timing-function 设置过渡效果时间曲线
transition-delay 设置过渡效果开始时间（延迟）
transition:property duration timing-function delay
transition:width 2s linear 1
css3动画
利用@keyframes 创建高级动画效果
@keyframes 设置动画效果
animation 执行动画动作（简写形式）
animation-name 设置@keyframes动画的名称
animation-duration 设置动画完成一个周期所花费的毫秒
2019/7/18
css3 2d转换
transform 转换方法名称
transform:rotate(9deg);
-webkit-transform:rotate(9deg);
.....
transform:scale(2,0.5) 缩放
transfrom:translate(200px,50px);移动 //第一个参数left,二top
transform:skew(20deg,20deg);//第一个参数围绕x,第二个围绕y轴
css3 3d 转换
rotatex()
rotateY()
scalex()
scaley()
css3 媒体查询介绍---实现自适应布局
背景：针对不同的访问设备呈现不同的布局效果
在css3中利用媒体查询技术可以实现页面的“自适应布局”
响应式布局|| 自适应布局
响应式布局：
一套布局适应不同设备
自适应布局：
根据分辨率的不同，界面有会调整
查询实现的方法：
@media
第一种方式
@media 类型 and (条件1) and (条件2) {
...css样式定义
}
@media screen and (min-width：375px) and (max-width:980px) {
body {
}
}
第二种：@importt 导入制定css
/*当屏幕可视窗口尺寸 <=980 px 像素时导入default.css文件*/
@import url("default.css") screen and (max-width:980px);
第三种：在link标签中导入指定css
default.css
index.html
<link href="default.css" media="screen and (max-width:980px)"/>
1.过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:100px;
background: #ccc;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
}
div:hover {
width:500px;
}
</style>
</head>
<body>
<div>hello world!</div>
</body>
</html>
2.动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:100px;
background: #ccc;
animation-name: animation-1;
animation-duration: 2s;
animation-iteration-count: infinite; /*定义动画播放的次数*/
animation-direction: alternate;
animation-play-state: running;
}
@keyframes animation-1 {
from {
background:yellow;
}
to {
background:blue;
}
}
</style>
</head>
<body>
<div>hello world!</div>
</body>
</html>
3.用media做的自适应布局
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div> <header> <ul> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> </ul> </header> <article> <section>内容1</section> <section>内容2</section> <section>内容3</section> </article> <footer class="footer"> 底部 </footer> </div> </body> </html>
css:
* {
margin: 0;
padding: 0;
}
div {
width:1200px;
text-align: center;
line-height: 50px;
font-size: 30px;
margin: 0 auto;
color:#fff;
}
header {
background: red;
height:50px;
}
header ul {
width:100%
}
header ul>li {
width:20%;
float: left;
list-style: none;
font-size:none;
border-right:4px solid #fff;
box-sizing: border-box;
}
article {
width:100%;
height:300px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
section:first-child {
width:20%;
height:300px;
border-right:5px solid #fff;
background:red;
float:left;
box-sizing: border-box;
}
section:nth-child(2){
width:60%;
height:300px;
border-right:5px solid #fff;
background:green;
float:left;
box-sizing: border-box;
}
section:last-child {
width:20%;
height:300px;
background:blue;
float:left;
box-sizing: border-box;
}
footer {
width:100%;
background: pink;
}
@media screen and (max-width:980px){
section:last-child {
display:none;
}
section:first-child {
width:40%;
box-sizing: border-box;
}
section:nth-child(2){
width:60%;
box-sizing: border-box;
border:none;
}
}
@media screen and (max-width:640px) {
header,
footer {
display: none;
}
section:first-child,
section:nth-child(2),
section:last-child {
width: 100%;
display: block;
float:none;
border:none;
}
}
1.结果
1.屏幕大于980px
2.大于640px 小于980px
3.小于640px:
---恢复内容结束---
