---恢复内容开始---

css3新增核心知识

	背景和边框

	文本效果

	2d/3d转换

	过渡和动画

	多列布局

	弹性盒模型

	媒体查询

	增强选择器

 css3浏览器兼容性

 css3在线工具

 css3generator

 http://css3generator.com/

 https://www.colorzilla.com/gradient-editor/

 https://css-tricks.com/examples/ButtonMaker/

 border-radius:15px 25px 35px 45px;

 左上角，右上角，右下角，左下角

 css3阴影：

 	box-shadow:h-shadow v-shadow blur color 

设置背景图片：

	background-image(允许设置多个背景图片)

	clip

	origin

	size

	background-image:url(shixun.png),url(bg.png);

	            position:right top,left top

	            repeat:no-repeat,repeat

	            origin

文本：

	text-shadow

	word-wrap:换行 break-word 强制换行

	text-overflow :设置文本内容溢出时控制规则

	word-break

	 white-space:nowrap;

	 overflow:hidden;

	 text-overflow:ellipsis

css3 选择器

	https://www.caniuse.com/

	新增选择器：

		属性选择器 [^:开头 $结尾 ~其中有一个]

		伪类选择器：first-child nth-child(1) first-of-type 匹配同类型中的第一个同级兄弟元素E

		伪元素选择器：:: 已经不局限使用样式选择器，对内容进行操作

	E::before 配合content使用

	E::after 配合content使用

	E::first-letter 第一个字母

	E::first-line 设置元素第一行的样式

	E::selection 设置元素被选中的样式

2019/7/17

css3 过渡：将元素从一种状态转变为另一种状态（简单的动画效果）

transition-property 设置过渡属性（效果）

transition-duration 设置过渡效果持续时间（n ms内完成）

transition-timing-function  设置过渡效果时间曲线

transition-delay 设置过渡效果开始时间（延迟）

transition:property duration timing-function delay

transition:width 2s linear 1

css3动画

利用@keyframes 创建高级动画效果

@keyframes 设置动画效果

animation 执行动画动作（简写形式）

animation-name 设置@keyframes动画的名称

animation-duration 设置动画完成一个周期所花费的毫秒

2019/7/18

css3 2d转换

transform 转换方法名称

transform:rotate(9deg);

-webkit-transform:rotate(9deg);

.....

transform:scale(2,0.5) 缩放

transfrom:translate(200px,50px);移动 //第一个参数left,二top

transform:skew(20deg,20deg);//第一个参数围绕x,第二个围绕y轴

css3 3d 转换

rotatex()

rotateY()

scalex()

scaley()

css3 媒体查询介绍---实现自适应布局

背景：针对不同的访问设备呈现不同的布局效果

在css3中利用媒体查询技术可以实现页面的“自适应布局”

响应式布局|| 自适应布局

响应式布局：

	一套布局适应不同设备

自适应布局：

	根据分辨率的不同，界面有会调整

查询实现的方法：

@media

第一种方式

@media 类型 and (条件1) and (条件2) {

	...css样式定义

}

@media screen and (min-width：375px) and (max-width:980px) {

	body {

	}

}

第二种：@importt 导入制定css

/*当屏幕可视窗口尺寸 <=980 px 像素时导入default.css文件*/

@import url("default.css") screen and (max-width:980px);

第三种：在link标签中导入指定css

default.css

index.html

<link href="default.css" media="screen and (max-width:980px)"/>

　　1.过渡

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div {

			width:200px;

			height:100px;

			background: #ccc;

			transition-property:width;

			transition-duration:2s;

			transition-timing-function:linear;

			transition-delay:1s;

		}

		div:hover {

			width:500px;

		}

	</style>

</head>

<body>

	<div>hello world!</div>

</body>

</html>

　　2.动画：

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div {

			width:200px;

			height:100px;

			background: #ccc;

			animation-name: animation-1;

			animation-duration: 2s;

			animation-iteration-count: infinite; /*定义动画播放的次数*/

			animation-direction: alternate;

			animation-play-state: running;

		}

		@keyframes animation-1 {

			from {

				background:yellow;

			}

			to {

				background:blue;

			}

		}

	</style>

</head>

<body>

	<div>hello world!</div>

</body>

</html>

　　3.用media做的自适应布局

html:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<link rel="stylesheet" href="main.css">

</head>

<body>

	<div>

		<header>

			<ul>

				<li>导航1</li>

				<li>导航2</li>

				<li>导航3</li>

				<li>导航4</li>

				<li>导航5</li>

			</ul>

		</header>

		<article>

			<section>内容1</section>

			<section>内容2</section>

			<section>内容3</section>

		</article>

		<footer class="footer">

			底部

		</footer>

	</div>

</body>

</html>

　　css:

　　

* {

	margin: 0;

	padding: 0;

}

div {

	width:1200px;

	text-align: center;

	line-height: 50px;

	font-size: 30px;

	margin: 0 auto;

	color:#fff;

}

header {

	background: red;

	height:50px;

}

header ul {

	width:100%

}

header ul>li {

	width:20%;

	float: left;

	list-style: none;

	font-size:none;

	border-right:4px solid #fff;

	box-sizing: border-box;

}

article {

	width:100%;

	height:300px;

	border-top: 5px solid #fff;

	border-bottom: 5px solid #fff;

}

section:first-child {

	width:20%;

	height:300px;

	border-right:5px solid #fff;

	background:red;

	float:left;

	box-sizing: border-box;

}

section:nth-child(2){

	width:60%;

	height:300px;

	border-right:5px solid #fff;

	background:green;

	float:left;

	box-sizing: border-box;

}

section:last-child {

	width:20%;

	height:300px;

	background:blue;

	float:left;

	box-sizing: border-box;

}

footer {

	width:100%;

	background: pink;

}

@media screen and (max-width:980px){

	section:last-child {

		display:none;

	}

	section:first-child {

		width:40%;

		box-sizing: border-box;

	}

	section:nth-child(2){

		width:60%;

		box-sizing: border-box;

		border:none;

	}

}

@media screen and (max-width:640px) {

	header,

	footer {

		display: none;

	}

	section:first-child,

	section:nth-child(2),

	section:last-child {

		width: 100%;

		display: block;

		float:none;

		border:none;

	}

}

1.结果

1.屏幕大于980px　

2.大于640px 小于980px

3.小于640px:

---恢复内容结束---

css3特性简要概括的更多相关文章

  1. html5特性简要概括

    1.html5主要的设计目的: 互联网语义化,以便更好地被人类和机器阅读 更好的在移动设备上支持web应用 https://www.w3.org/TR/html5 新增内容: 新的语义标签 <h ...

  2. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

  3. ExtJS的4.1新特性简要介绍

    ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...

  4. 现在就能投入使用的12个高端大气上档次的CSS3特性

    原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始 ...

  5. 20个非常绚丽的 CSS3 特性应用演示

    这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用  ...

  6. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  7. CSS3特性修改(自定义)浏览器默认滚动条

    前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成 ...

  8. Risc-V简要概括

    1.Risc-V硬件平台术语 一个RiscV硬件平台可以包含一个或多个RiscV兼容的核心.其它非RiscV兼容的核心.固定功能的加速器.各种物理存储器结构.I/O设备以及允许这些部件相互连通的互联结 ...

  9. 字符输出流Writer简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...

随机推荐

  1. git本地仓库目录问题

    git安装后修改默认的路径:每次打开git bash后都会进入这个目录 https://blog.csdn.net/weixin_39634961/article/details/79881140 在 ...

  2. leetcode第23题：合并K个排序链表

    首先我想到的是采用一般递归法,将K个链表合并化为(k-1)两个链表合并 class Solution: def mergeKLists(self, lists: List[ListNode]) -&g ...

  3. docker 创建实例

    docker创建mysql实例要注意表名大小写和端口号映射的问题.下面是使用文件挂载解决表名大小写问题. docker run --name mysql-1 -e MYSQL_ROOT_PASSWOR ...

  4. VRRP笔记二:配置keepalived为实现haproxy高可用的配置文件示例

    ! Configuration File for keepalived global_defs { notification_email { linuxedu@foxmail.com mageedu@ ...

  5. Dubbo、MQ等

    1,Dubbo.MQ 1)Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案 2)Dubbo采用全Spring配置方式,透明化接入应用,对应用没有 ...

  6. 每天一个linux命令（15）-tail

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不断刷新, ...

  7. django--ajax的使用,应用

    Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...

  8. 2——PHP defined()函数

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. 自定义Toast的出现样式

    使用下面的方法来获取一个Toast对象: private Toast showShortToast() { if (toast == null) { toast = new Toast(this); ...

  10. .Net Core中使用ExceptionFilter

    .Net Core中有各种Filter,分别是AuthorizationFilter.ResourceFilter.ExceptionFilter.ActionFilter.ResultFilter. ...