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. Python3.5-20190502-廖老师-自我笔记

    python的语法主要就是严格的缩进.一般缩进都是四个空格.以冒号结尾的(:)就意味着他后面有代码块.(js代码块使用{}抱起来的,我记得c语言也是,但是python就不需要,他只要严格缩进的就可以了 ...

  2. Ubuntu 16.04配置vncviewer

    网上有各种各样的教程,既混乱又复杂.这是提供一个亲自测试可用的配置方案,十分简单,桌面环境选用xfce,Ubuntu版本是16.04. 1 安装 Xfce 和 TightVNC sudo apt in ...

  3. .NET Core 使用 nlog 进行日志记录

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  4. 【Linux】服务器间免密登录、免确认机器指纹

    1.生成密钥 ssh-keygen -t rsa -C "<填写自己方便识别的注释>" -b 4096  没什么问题就执行三次空格. 三次问题是1.填入生成密钥对的路径 ...

  5. hashmap:cr:csdn

    HashMap相关问题 1.你用过HashMap吗?什么是HashMap?你为什么用到它? 用过,HashMap是基于哈希表的Map接口的非同步实现,它允许null键和null值,且HashMap依托 ...

  6. bugku | login2(SKCTF) 200

    在响应包里面发现tips,base64解码后看到提示信息: $sql="SELECT username,password FROM admin WHERE username='". ...

  7. PWN入门的入门——工具安装

    安装pwntool: 命令行运行: pip install pwntools python import pwn pwn.asm("xor eax,eax") 出现'1\xc0'  ...

  8. vue-cli2.X环境搭建

    1.先安装nodejs环境https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装node -v np ...

  9. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  10. Apache + Tomcat 集群的配置

    公司最近新接了一个项目,客户要求WEB SERVER 必须是APACHE,,由于之前的项目一直都是NGINX,,无奈啊,,由于对方的IT又是在三哥的过度,经过一番的争执只能顺应三哥三姐的要求..