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(笔记)的更多相关文章

  1. 前端学习(十二):CSS排版

    进击のpython ***** 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中 ...

  2. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  3. python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字

    python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...

  4. 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  5. (C/C++学习笔记) 二十二. 标准模板库

    二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...

  6. Tensorflow深度学习之十二:基础图像处理之二

    Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474   首先放出原始图像: ...

  7. 剑指Offer(二十二):从上往下打印二叉树

    剑指Offer(二十二):从上往下打印二叉树 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/b ...

  8. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  9. VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池

    VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...

  10. JAVA之旅(二十二)——Map概述,子类对象特点,共性方法,keySet,entrySet,Map小练习

    JAVA之旅(二十二)--Map概述,子类对象特点,共性方法,keySet,entrySet,Map小练习 继续坚持下去吧,各位骚年们! 事实上,我们的数据结构,只剩下这个Map的知识点了,平时开发中 ...

随机推荐

  1. Vue:列表渲染 v-for on a <template>

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...

  2. 正则表达式中的Quantifiers

    ?: Match an element zero or one time 例如: colou?r: color 或 colour 但不能是 colo2r *: Match an element zer ...

  3. js-ifelse-奇技淫巧

    我们有A,B,C,D四个不同的类别,在最开始的时候只有三个类别,并且两个类别是做同样的事: function categoryHandle(category) { if(category !== 'A ...

  4. linux开机启动jar

    一.使用系统文件rc.local 启动命令可添加在/etc/rc.local(链接地址为/etc/rc.d/rc.local)中即可开机启动,不建议使用此种方法. 二.自定义启动脚本 1.新建启动脚本 ...

  5. Oracle体系结构理论

    问题: 1:通常说Oracle数据库是什么? 2:如何理解Oracle实例? 3:Oracle实例由哪些部分组成,它们之间的作用是什么? 4:如何理解Oracle的物理结构? 5:Oracle的物理结 ...

  6. scipy与sklearn下载与安装

    一.scipy下载与安装 scipy下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#opencv提供各种包whl文件 下载之后放到Scripts文件中 ...

  7. BUUCTF | 高明的黑客

    这一题一开始我没有理解"www.tar.gz"的涵义,还以为有一个其他的网站叫这个,后来才突然顿悟他也有可能是一个目录!!!地址栏输入”/www.tar.gz“ 然后就可以得到源码 ...

  8. java配置和tomcat安装

    原文: https://www.cnblogs.com/lwjboke/p/7089126.html 下载: jdk历史版本 下载地址: http://www.oracle.com/technetwo ...

  9. python练习题返回列表中的第二小的元素的下标

    # 第三题:返回列表中的第二小的元素的下标 # 1.参数是一个列表,元素全部是整数 # 2.返回第二小的元素的下标 def seconde_min(lt): n = len(lt) if lt[0]& ...

  10. linux设备驱动第三篇:写一个简单的字符设备驱动

          在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分 ...