前端学习(二十二)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(笔记)的更多相关文章
- 前端学习(十二):CSS排版
进击のpython ***** 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字
python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...
- 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环
目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...
- (C/C++学习笔记) 二十二. 标准模板库
二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...
- Tensorflow深度学习之十二:基础图像处理之二
Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474 首先放出原始图像: ...
- 剑指Offer(二十二):从上往下打印二叉树
剑指Offer(二十二):从上往下打印二叉树 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/b ...
- Bootstrap <基础二十二>超大屏幕(Jumbotron)
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
- VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池
VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...
- JAVA之旅(二十二)——Map概述,子类对象特点,共性方法,keySet,entrySet,Map小练习
JAVA之旅(二十二)--Map概述,子类对象特点,共性方法,keySet,entrySet,Map小练习 继续坚持下去吧,各位骚年们! 事实上,我们的数据结构,只剩下这个Map的知识点了,平时开发中 ...
随机推荐
- Python3.5-20190502-廖老师-自我笔记
python的语法主要就是严格的缩进.一般缩进都是四个空格.以冒号结尾的(:)就意味着他后面有代码块.(js代码块使用{}抱起来的,我记得c语言也是,但是python就不需要,他只要严格缩进的就可以了 ...
- Ubuntu 16.04配置vncviewer
网上有各种各样的教程,既混乱又复杂.这是提供一个亲自测试可用的配置方案,十分简单,桌面环境选用xfce,Ubuntu版本是16.04. 1 安装 Xfce 和 TightVNC sudo apt in ...
- .NET Core 使用 nlog 进行日志记录
1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...
- 【Linux】服务器间免密登录、免确认机器指纹
1.生成密钥 ssh-keygen -t rsa -C "<填写自己方便识别的注释>" -b 4096 没什么问题就执行三次空格. 三次问题是1.填入生成密钥对的路径 ...
- hashmap:cr:csdn
HashMap相关问题 1.你用过HashMap吗?什么是HashMap?你为什么用到它? 用过,HashMap是基于哈希表的Map接口的非同步实现,它允许null键和null值,且HashMap依托 ...
- bugku | login2(SKCTF) 200
在响应包里面发现tips,base64解码后看到提示信息: $sql="SELECT username,password FROM admin WHERE username='". ...
- PWN入门的入门——工具安装
安装pwntool: 命令行运行: pip install pwntools python import pwn pwn.asm("xor eax,eax") 出现'1\xc0' ...
- vue-cli2.X环境搭建
1.先安装nodejs环境https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装node -v np ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- Apache + Tomcat 集群的配置
公司最近新接了一个项目,客户要求WEB SERVER 必须是APACHE,,由于之前的项目一直都是NGINX,,无奈啊,,由于对方的IT又是在三哥的过度,经过一番的争执只能顺应三哥三姐的要求..