前端学习(二十二）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;

效果：配合背景图达到效果（对于素材来说：透明的地方不显示，不透明显示）

============================================

巴特西

前端学习(二十二）css3（笔记）

最新文章

热门文章