前端学习(二十二)css3(笔记)
html5
普通:
header section footer nav article aside figure
特殊:
canvas video audio(controls控制台)
表单:
type
time
color
range
number
自动获取焦点:
autofocus
提示文字:
placeholder
-----------------------------------------------
css3:
background:-webkit-linear-gradient(top,red,blue,green);
浏览器的前缀:
以前:
background:-webkit-linear-gradient(top,red,blue,green);
background:-ms-linear-gradient(top,red,blue,green);
background:-moz-linear-gradient(top,red,blue,green);
background:-o-linear-gradient(top,red,blue,green);
现在:
background:-webkit-linear-gradient(top,red,blue,green);
background:linear-gradient(top,red,blue,green);
-webkit- 谷歌
-ms- IE
-moz- 火狐
-o- 欧朋
-----------------------------------------
圆角:
border-radius:10px; ---四个方向的圆角都是10px
圆:
1.正方形
2.值是:50%;(宽高的一半)
左上角单独写法:
border-top-left-radius:50px;
border-top-left-radius:100px 50px;---上边100px弧度 左边50px弧度!
---------------------------------------------
动画:
第一种动画:
用法:改变谁提前给它加好这个动画样式!
transition:1s all; ---过渡动画!
transition:3s all ease-in-out;
transition:时间 所有样式 运动形式;
好处:
1.什么样式都可以!
2.和js配合起来很轻松!
3.性能很高!
***跳变的动画做不了!(变好几次)
---------------------------------------
第二种动画:
/*定义动画*/
@-webkit-keyframes aaa{
0%{width:100px;height:100px; background:red;}
50%{width:300px;height:100px; background:yellow; border-radius:50%;}
100%{width:100px;height:100px; background:red;}
调用:(让谁改变,给谁调用!)
-webkit-animation:aaa 2s infinite;
-webkit-animation:动画名 时间 运动形式;
infinite(无限运动)
--------------------------------------------------
背景色:
1.red blue
2.#000 #fff
3.rgb(0,0,0)---css3
background:rgba(0,0,0,0.5);
background:rgba(0,0,0,透明度);
盒子阴影:
默认外阴影!
box-shadow:5px 5px 5px 5px #000;
1.X轴偏移量(正数向右)
2.Y轴偏移量(正数向下)
3.模糊度
4.阴影大小
5.颜色
内阴影:inset
box-shadow:inset 5px 5px 5px 5px blue;
--------------------------------------------
文本阴影:
text-shadow:5px 5px 5px #000;
1.X轴偏移量(正数向右)
2.Y轴偏移量(正数向下)
3.模糊度
4.颜色
***注意:
1.没有内阴影
2. text-shadow:5px 5px 5px blue,15px 15px 2px red,30px 30px 2px green;
--------------------------------------------------
背景色渐变:
线性:
background:linear-gradient(red,blue,green);
方向:默认从上往下
背景色:linear-gradient(颜色1,颜色2,颜色3);
-webkit-linear-gradient(top,red,blue,green);
-webkit-linear-gradient(开始方向,red,blue,green)
------单词表示法:
background:-webkit-linear-gradient(10deg,red,blue,green)---度数表示法:
60deg--60度;---按照逆时针来走的!
background:linear-gradient(45deg,red 25%,blue 25%,blue 50%,yellow 50%,yellow 75%,green 75%);
径向:
background:radial-gradient(red,blue);
1.形状1
background:radial-gradient(100px 100px,red,blue);
background:radial-gradient(x轴半径 y轴半径,red,blue);
2.形状2
background:radial-gradient(ellipse,red,blue);----会随着div的宽高变椭圆
background:radial-gradient(circle,red,blue);----就是圆
3.位置:圆的中心点的位置!
全:background:radial-gradient(位置,形状,red,blue);
1.单词表示法
-webkit-radial-gradient(left top,100px 100px,red,blue)
2.数值(以div的左上角为起点)
background:-webkit-radial-gradient(0 0,100px 100px,red,blue);
第一个值是left
第二个是top
背景色:-webkit-
-------------------------------------------------
背景图大小:
1.
background-size:100% 100%;
背景图大小:宽 高!
2.
background-size:contain;
宽度100%(宽度和父级宽度一致,高度按照宽度比例变化-为了保持图片不变形)
3.
background-size:cover;
高度100%(高度和父级高度一致,宽度宽度按照高度比例变化-为了保持图片不变形)
--------------------------------------------
蒙版:
-webkit-mask:url(img/666.png) no-repeat center;
效果:配合背景图达到效果(对于素材来说:透明的地方不显示,不透明显示)
============================================