add css3 动画

This commit is contained in:
qianguyihao 2018-02-09 13:59:06 +08:00
parent 9ae2d089a2
commit e115c561af
6 changed files with 2889 additions and 22 deletions

View File

@ -277,7 +277,7 @@ PSpadding的区域也是有背景图的。
![](http://img.smyhvae.com/20170813_1158.gif)
### background综合属性
### background 综合属性
background属性和border一样是一个综合属性可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到boder)

View File

@ -336,14 +336,14 @@ p将无视父亲的padding在border内侧为参考点进行定位
可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做:
```
<div>
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先,让左边线居中
top: 0;
margin-left: -300px; 然后向左移动宽度600px的一半
</div>
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先,让左边线居中
top: 0;
margin-left: -300px; 然后向左移动宽度600px的一半
}
```
如上方代码所示我们先让这个宽度为600px的盒子左边线居中然后向左移动宽度600px的一半就达到效果了。
@ -519,8 +519,6 @@ z-index属性的应用还是很广泛的。当好几个已定位的标签出现
2用`z-index`来控制层级数。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**id`vitateam`)。

View File

@ -0,0 +1,890 @@
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8424230.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
## HTML5的介绍
### Web 技术发展时间线
- 1991 HTML
- 1994 HTML2
- 1996 CSS1 + JavaScript
- 1997 HTML4
- 1998 CSS2
- 2000 XHTML1严格的html
- 2002 Tableless Web Design表格布局
- 2005 AJAX
- 2009 HTML5
- 2014 HTML5 Finalized
2002年的表格布局逐渐被淘汰是因为表格是用来承载数据的并不是用来划分网页结构的。
2009年就已经推出了HTML5的草案但直到2014年才有定稿是因为有移动端的推动。
H5草案的前身是叫Web Application最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。
2007年被 W3C 组织接纳,并在 2008-01-22 发布 HTML5 的第一个草案。
### 什么是 HTML5
HTML5并不仅仅只是做为HTML标记语言的一个最新版本更重要的是它**制定了Web应用开发的一系列标准**成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素如新语义标签、智能表单、多媒体标签等可以帮助开发者创建富互联网应用还提供了一些Javascript API如地理定位、重力感应、硬件访问等可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
**`HTML5`的广义概念**HTML5代表浏览器端技术的一个发展阶段。在这个阶段浏览器的呈现技术得到了飞跃发展和广泛支持它包括HTML5、CSS3、Javascript API在内的一套技术组合。
`HTML5`不等于 `HTML next version`。`HTML5` 包含: `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
**总结**`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括HTML5CSS3Javascript API在内的一套**技术组合**。
**富客户端**:具有很强的**交互性**和体验的客户端程序。比如说,浏览博客,是比较简单的客户端;一个在线听歌的网站、即时聊天网站就是富客户端。
**PS**
单纯地从技术的角度讲,兼容性问题只会让开发者徒增烦恼。
如果网页端的程序能做到PC客户端的体验就会对后者构成威胁。
### HTML5 的应用场景
列举几个HTML5 的应用场景:
1极具表现力的网页内容简约而不简单。
2网页应用程序
- 代替PC端的软件iCloud、百度脑图、Office 365等。
- APP端的网页淘宝、京东、美团等。
- 微信端:公众号、小程序等。
3混合式本地应用。
4简单的游戏。
### HTML5 新增的内容
![](http://img.smyhvae.com/20180206_1540.png)
![](http://img.smyhvae.com/20180206_1545.png)
![](http://img.smyhvae.com/20180206_1541.png)
## 语义化的标签
### 语义化的作用
语义标签对于我们并不陌生,如`<p>`表示一个段落、`<ul>`表示一个无序列表。**标签语义化的作用:**
- 能够便于开发者阅读和写出更优雅的代码。
- 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容。
- 更好地搜索引擎优化。
总结HTML的职责是描述一块内容是什么或其意义而不是它长什么样子它的外观应该由CSS来决定。
### H5在语义上的改进
在此基础上HTML5 增加了大量有意义的语义标签,更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
我们常见的 css+div 布局是:
![](http://img.smyhvae.com/20180206_1546.png)
以后我们可以这样写:
![](http://img.smyhvae.com/20180206_1550.png)
传统的做法中,我们通过增加类名如`class="header"`、`class="footer"`使HTML页面具有语义性但是不具有通用性。
HTML5 则是通过新增语义标签的形式来解决这个问题,例如`<header></header>`、`<footer></footer>`等,这样就可以使其具有通用性。
**传统网页布局:**
```html
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer">
</div>
```
**H5 的经典网页布局:**
```html
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer>
</footer>
```
## H5中常用的新语义标签
- `<nav>` 表示导航
- `<header>` 表示页眉
- `<footer>` 表示页脚
- `<section>` 表示区块
- `<article>` 表示文章。如文章、评论、帖子、博客
- `<aside>` 表示侧边栏 如文章的侧栏
- `<figure>` 表示媒介内容分组。
- `<mark>` 表示标记 (用得少)
- `<progress>` 表示进度 (用得少)
- `<time>` 表示日期
本质上新语义标签与`<div>`、`<span>`没有区别只是其具有表意性使用时除了在HTML结构上需要注意外其它和普通标签的使用无任何差别可以理解成`<div class="nav">` 相当于`<nav>`。
PS单标签不用写关闭符号。
### 新语义标签的兼容性处理
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法引入`html5shiv.js`文件。
引入时需要做if判断具体代码如下
```html
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
```
上方代码是**条件注释**虽然是注释但是IE浏览器可以识别出来。解释一下
- lless 更小
- tthan 比
- eequal等于
- ggreat 更大
PS:我们在测试 IE 浏览器的兼容的时候,可以使用软件 ietest模拟IE6-IE11。
在不支持HTML5新标签的浏览器会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用。
但是在IE9版本以下并不能正常解析这些新标签但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍这样IE低版本也能正常解析HTML5新标签了。
当然在实际开发中我们更多采用的办法是检测IE浏览器的版本来加载第三方的JS库来解决兼容问题如上方代码所示
## H5中的表单
传统的Web表单已经越来越不能满足开发的需求HTML5 在 Web 表单方向做了很大的改进,如拾色器、日期/时间组件等,使表单处理更加高效。
### H5中新增的表单类型
- `email` 只能输入email格式。自动带有验证功能。
- `tel` 手机号码。
- `url` 只能输入url格式。
- `number` 只能输入数字。
- `search` 搜索框
- `range` 滑动条
- `color` 拾色器
- `time` 时间
- `date` 日期。
- `--datetime` 时间日期
- `month` 月份
- `week` 星期
上面的部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
代码举例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单类型</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
form {
max-width: 500px;
width: 100%;
margin: 32px auto 0;
font-size: 16px;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 100%;
height: 25px;
margin-top: 2px;
display: block;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单类型</legend>
<label for="">
email: <input type="email" name="email" required>
</label>
<label for="">
color: <input type="color" name="color">
</label>
<label for="">
url: <input type="url" name='url'>
</label>
<label for="">
number: <input type="number" step="3" name="number">
</label>
<label for="">
range: <input type="range" name="range" value="100">
</label>
<label for="">
search: <input type="search" name="search">
</label>
<label for="">
tel: <input type="tel" name="tel">
</label>
<label for="">
time: <input type="time" name="time">
</label>
<label for="">
date: <input type="date" name="date">
</label>
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
week: <input type="week" name="month">
</label>
<label for="">
month: <input type="month" name="month">
</label>
<label for="">
datetime-local: <input type="datetime-local" name="datetime-local">
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>
```
代码解释:
`<fieldset>` 标签将表单里的内容进行打包,代表一组;而`<legend> `标签的则是 fieldset 里的元素定义标题。
### 表单元素(标签)
这里讲两个表单元素。
**1、`<datalist>` 数据列表:**
```html
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>
```
上方代码中input里的list属性和 datalist 进行了绑定。
效果:
![](http://img.smyhvae.com/20180206_1845.gif)
上图可以看出,数据列表可以自动提示。
2、`<keygen>`元素:
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器key-pair generator。当提交表单时会生成两个键一个公钥一个私钥。
私钥private key存储于客户端公钥public key则被发送到服务器。公钥可用于之后验证用户的客户端证书client certificate
3、`<meter>`元素:度量器
- low低于该值后警告
- high高于该值后警告
- value当前值
- max最大值
- min最小值。
举例:
```javascript
<meter value="81" min="0" max="100" low="60" high="80"/>
```
### 表单属性
- `placeholder` 占位符(提示文字)
- `autofocus` 自动获取焦点
- `multiple` 文件上传多选或多个邮箱地址
- `autocomplete` 自动完成填充的。on 开启默认off 取消。用于表单元素,也可用于表单自身(on/off)
- `form` 指定表单项属于哪个form处理复杂表单时会需要
- `novalidate` 关闭默认的验证功能只能加给form
- `required` 表示必填项
- `pattern` 自定义正则,验证表单。例如
代码举例:
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名:<input type="text" placeholder="例如smyhvae" autofocus name="userName" autocomplete="on" required/>
</label>
<label for="">
电话:<input type="tel" pattern="1\d{10}"/>
</label>
<label for="">
multiple的表单: <input type="file" multiple>
</label>
<!-- 上传文件-->
<input type="file" name="file" multiple/>
<input type="submit"/>
</fieldset>
</form>
</body>
</html>
```
### 表单事件
- `oninput()`:用户输入内容时触发,可用于输入字数统计。
- `oninvalid()`:验证不通过时触发。比如,如果验证不通过时,想弹出一段提示文字,就可以用到它。
举例:
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 400px;
/* 最小宽度*/
min-width: 200px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱:<input type="email" name="" id="txt1"/>
</label>
<label for="">
输入的次数统计:<input type="text" name="" id="txt2"/>
</label>
<input type="submit"/>
</fieldset>
</form>
<script>
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var num = 0;
txt1.oninput = function () { //用户输入时触发
num++; //用户每输入一次num自动加 1
//将统计数显示在txt2中
txt2.value = num;
}
txt1.oninvalid = function () { //验证不通过时触发
this.setCustomValidity('亲,请输入正确哦'); //设置验证不通过时的提示文字
}
</script>
</body>
</html>
```
效果:
![](http://img.smyhvae.com/20180206_1920.gif)
## 多媒体
在HTML5之前在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下并非所有用户的浏览器都安装了Flash插件由此使得音频、视频播放的处理变得非常复杂并且移动设备的浏览器并不支持Flash插件。
H5里面提供了视频和音频的标签。
### 音频
HTML5通过`<audio>`标签来解决音频播放的问题。
使用举例:
```html
<audio src="music/yinyue.mp3" autoplay controls> </audio>
```
效果如下:
![](http://img.smyhvae.com/20180206_1958.png)
我们可以通过附加属性,来更友好地控制音频的播放,如:
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。
- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里)
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时,此属性将失效。
**处理兼容性问题:**
由于版权等原因,不同的浏览器可支持播放的格式是不一样的:
![](http://img.smyhvae.com/20180206_1945.png)
为了做到多浏览器支持,可以采取以下兼容性写法:
```html
<!--推荐的兼容写法:-->
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉,你的浏览器暂不支持此音频格式
</audio>
```
代码解释:如果识别不出音频格式,就弹出那句“抱歉”。
### 视频
HTML5通过`<video>`标签来解决视频播放的问题。
使用举例:
```html
<video src="video/movie.mp4" controls autoplay></video>
```
我们可以通过附加属性,来更友好地控制视频的播放,如:
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。
- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里)
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时,此属性将失效。
- `width`:设置播放窗口宽度。
- `height`:设置播放窗口的高度。
由于版权等原因,不同的浏览器可支持播放的格式是不一样的:
![](http://img.smyhvae.com/20180206_2025.png)
兼容性写法:
```html
<!--<video src="video/movie.mp4" controls autoplay ></video>-->
<!-- 行内块 display:inline-block -->
<video controls autoplay>
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉,不支持此视频
</video>
```
## DOM 操作
### 获取元素
- document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素以类数组形式存在。
### 类名操作
- Node.classList.add("class") 添加class
- Node.classList.remove("class") 移除class
- Node.classList.toggle("class") 切换class有则移除无则添加
- Node.classList.contains("class") 检测是否存在class
### 自定义属性
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
H5可以直接在标签里添加自定义属性**但必须以 `data-` 开头**。
举例:
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["content"]); //打印结果我是一个div
console.log(box.dataset["myName"]); //打印结果smyhvae
//设置自定义属性的值
var num = 100;
num.index = 10;
box.index = 100;
box.dataset["content"] = "aaaa";
</script>
</body>
</html>
```
### 举例鼠标点击时tab栏切换
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 标签</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}
nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a:last-child {
border-right: 0 none;
}
nav a.active {
background-color: #9BAF9B;
}
.cont {
overflow: hidden;
display: none;
}
.cont ol {
line-height: 30px;
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local">
<ol>
<li>国内新闻1</li>
<li>国内新闻2</li>
<li>国内新闻3</li>
<li>国内新闻4</li>
<li>国内新闻5</li>
<li>国内新闻6</li>
<li>国内新闻7</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>国内新闻1</li>
<li>国际新闻2</li>
<li>国际新闻3</li>
<li>国际新闻4</li>
<li>国际新闻5</li>
<li>国际新闻6</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>体育新闻1</li>
<li>体育新闻2</li>
<li>体育新闻3</li>
<li>体育新闻4</li>
<li>体育新闻5</li>
<li>体育新闻6</li>
<li>体育新闻7</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>娱乐新闻1</li>
<li>娱乐新闻2</li>
<li>娱乐新闻3</li>
<li>娱乐新闻4</li>
<li>娱乐新闻5</li>
<li>娱乐新闻6</li>
<li>娱乐新闻7</li>
</ol>
</section>
</div>
<script>
// 目标: 默认显示一个 当前的样式
// 点击导航,实现切换
// key 表示的当前显示的是第几个
(function (key) {
// 获取所有的导航
var navs = document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件,并且添加当前样式
for (var i = 0; i < navs.length; i++) {
// 如果是用户指定的当前样式
if (key == i) {
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId = navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#' + secId).style.display = 'block';
}
// 给每一个导航绑定点击事件
navs[i].onclick = function () {
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav = document.querySelector('.active');
// 获取对应的内容区域 ,让其隐藏
var currentId = currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#' + currentId).style.display = 'none';
// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId = this.dataset['cont'];
document.querySelector('#' + myId).style.display = 'block';
}
}
})(0);
</script>
</body>
</html>
```
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**id`vitateam`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)

View File

@ -7,8 +7,23 @@
## 前言
我们在上一篇文章中学习了CSS3的选择器本文来学一下CSS3的一些属性。
我们在上一篇文章中学习了[CSS3的选择器](http://www.cnblogs.com/smyhvae/p/8426799.html)本文来学一下CSS3的一些属性。
本文主要内容:
- 颜色
- 文本
- 盒模型中的 box-sizing 属性
- 处理兼容性问题:私有前缀
- 边框
- 背景属性
- 渐变
## 颜色
@ -30,14 +45,12 @@ RGBA、HSLA可应用于**所有**使用颜色的地方。
- R、G、B 的取值范围是0~255
**HSLA 举例**
```javascript
background-color: hsla(240,50%,50%,0.4);
```
解释:
- `H` 色调,取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
@ -153,7 +166,6 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
解释:此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小,会改变内容的宽高,盒子的总宽高不变。
## 处理兼容性问题:私有前缀
通过网址<http://caniuse.com/> 可以查询CSS3各特性的支持程度。
@ -201,7 +213,6 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
![](http://img.smyhvae.com/20180207_1710.png)
## 边框
边框的属性很多,其中**边框圆角**和**边框阴影**这两个属性,应用十分广泛,兼容性也相对较好,且符合**渐进增强**的原则,需要重点熟悉。
@ -239,7 +250,6 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
border-radius: 60px;
```
举例:
```html
@ -313,7 +323,6 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
![](http://img.smyhvae.com/20180207_1750.png)
### 边框阴影:`box-shadow` 属性
格式举例:
@ -394,6 +403,15 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
![](http://img.smyhvae.com/20180207_2051.png)
### 常见的边框图片汇总
```html
```
## 背景属性
背景属性在 CSS3 中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
@ -525,7 +543,6 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
- 重复渐变。
见下图:
![](http://img.smyhvae.com/20180208_1140.png)
@ -832,11 +849,8 @@ CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽
上图中给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0则样式无变化和第一个div一样。如果设置的透明度是从1到1则盒子是全黑的。
CSS3的更多属性且听下文继续。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**id`vitateam`)。

View File

@ -0,0 +1,577 @@
## CSS3 常见边框汇总
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 边框</title>
<style>
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #F7F7F7;
}
.wrapper {
width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
header {
padding: 20px 0;
margin-bottom: 20px;
text-align: center;
}
header h3 {
line-height: 1;
font-weight: normal;
font-size: 28px;
}
.main {
/*overflow: hidden;*/
}
.main:after {
content: '';
clear: both;
display: block;
}
.main .item {
width: 210px;
height: 210px;
margin: 0 30px 30px 0;
display: flex;
position: relative;
background-color: #FFF;
float: left;
box-shadow: 2px 2px 5px #CCC;
}
.main .item:after {
content: attr(data-brief);
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 210px;
position: absolute;
top: 0;
left: 0;
color: #FFF;
font-family: '微软雅黑';
font-size: 18px;
background-color: rgba(170, 170, 170, 0);
z-index: -1;
transition: all 0.3s ease-in;
}
.main .item:hover:after {
background-color: rgba(170, 170, 170, 0.6);
z-index: 100;
}
.main .item:nth-child(4n) {
margin-right: 0;
}
/*.main .item:nth-last-child(-n+5) {
margin-bottom: 0;
}*/
/* 以上是骨架样式 */
/* 1、2、3、4 顺时针 */
.border-radius {
width: 180px;
height: 180px;
margin: auto;
border: 1px solid red;
/*border-radius: 50% 30% 20%;*/
}
.square {
border-radius: 0;
}
/*拱形*/
.item:nth-child(1) .border-radius {
border-radius: 90px;
}
/*拱形*/
.item:nth-child(2) .border-radius {
border-radius: 90px 90px 0 0;
}
/*半圆*/
.item:nth-child(3) .border-radius {
height: 90px;
border-radius: 90px 90px 0 0;
}
/*左上角*/
.item:nth-child(4) .border-radius {
/*height: 90px;*/
border-radius: 90px 0 0 0;
}
/*四分之一圆*/
.item:nth-child(5) .border-radius {
width: 90px;
height: 90px;
border-radius: 90px 0 0 0;
}
/*横着的椭圆*/
.item:nth-child(6) .border-radius {
height: 90px;
/*border-radius: 50%;*/
border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
/*border-radius: 45px / 90px;*/
}
/*竖着的椭圆*/
.item:nth-child(7) .border-radius {
width: 90px;
border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
}
/*半个横着的椭圆*/
.item:nth-child(8) .border-radius {
height: 45px;
border-radius: 90px 90px 0 0 / 45px 45px 0 0;
}
/*半个竖着的椭圆*/
.item:nth-child(9) .border-radius {
width: 45px;
border-radius: 45px 0 0 45px / 90px 0 0 90px;
}
/*四分之一竖着的椭圆*/
.item:nth-child(10) .border-radius {
width: 45px;
height: 90px;
border-radius: 45px 0 0 0 / 90px 0 0 0;
}
/*饼环*/
.item:nth-child(11) .border-radius {
width: 40px;
height: 40px;
border: 70px solid red;
border-radius: 90px;
}
/*圆饼*/
.item:nth-child(12) .border-radius {
width: 40px;
height: 40px;
border: 70px solid red;
border-radius: 60px;
}
/*左上角圆饼*/
.item:nth-child(13) .border-radius {
width: 60px;
height: 60px;
border: 60px solid red;
border-radius: 90px 0 0 0;
}
/*对角圆饼*/
.item:nth-child(14) .border-radius {
width: 60px;
height: 60px;
border: 60px solid red;
border-radius: 90px 0 90px 0;
}
/*四边不同色*/
.item:nth-child(15) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;
}
/*右透明色*/
.item:nth-child(16) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;
border-right-color: transparent;
}
/*圆右透明色*/
.item:nth-child(17) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red;
border-right-color: transparent;
border-radius: 90px;
}
/*圆右红透明色*/
.item:nth-child(18) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: transparent;
border-right-color: red;
border-radius: 90px;
}
/*阴阳图前世*/
.item:nth-child(19) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
/*border-right-color: red;*/
border-radius: 90px;
}
/*阴阳图前世2*/
.item:nth-child(20) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-style: solid;
border-bottom-color: green;
background-color: red;
/*border-right-color: red;*/
border-radius: 90px;
}
/*阴阳图今生*/
.item:nth-child(21) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-style: solid;
border-bottom-color: green;
background-color: red;
border-radius: 90px;
position: relative;
}
.item:nth-child(21) .border-radius::after,
.item:nth-child(21) .border-radius::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
/*margin: -10px 0 0 0;*/
border-width: 35px;
border-style: solid;
border-radius: 45px;
}
/*左阴阳*/
.item:nth-child(21) .border-radius::after {
background-color: red;
border-color: green;
}
/*右阴阳*/
.item:nth-child(21) .border-radius::before {
background-color: green;
border-color: red;
right: 0;
}
/*右阴阳*/
.item:nth-child(22) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-bottom-color: green;
border-bottom-style: solid;
background-color: red;
border-radius: 90px;
position: relative;
}
.item:nth-child(22) .border-radius::after,
.item:nth-child(22) .border-radius::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-width: 35px;
border-style: solid;
border-radius: 45px;
}
.item:nth-child(22) .border-radius::before {
border-color: green;
background-color: red;
}
.item:nth-child(22) .border-radius::after {
right: 0;
border-color: red;
background-color: green;
}
/*消息框*/
.item:nth-child(23) .border-radius {
width: 160px;
height: 80px;
background-color: red;
border-radius: 6px;
position: relative;
}
.item:nth-child(23) .border-radius::after {
content: '';
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-right-color: red;
position: absolute;
top: 16px;
left: -20px;
}
/*奇怪的图形*/
.item:nth-child(24) .border-radius {
width: 40px;
height: 40px;
border-width: 45px 0 45px 70px;
border-style: solid;
border-radius: 0 0 60px 0;
border-color: red;
}
/*奇怪的图形2*/
.item:nth-child(25) .border-radius {
width: 100px;
height: 40px;
border-width: 45px 20px 45px 70px;
border-style: solid;
border-radius: 60px;
border-color: red;
}
/*QQ对话*/
.item:nth-child(26) .border-radius {
width: 160px;
height: 80px;
background-color: red;
border-radius: 6px;
position: relative;
}
.item:nth-child(26) .border-radius::after {
content: '';
position: absolute;
top: 0;
right: -20px;
width: 30px;
height: 30px;
border-width: 0 0 30px 30px;
border-style: solid;
border-bottom-color: red;
border-left-color: transparent;
border-radius: 0 0 60px 0;
}
/*圆角的百分比设置 */
.item:nth-child(27) .border-radius {
width: 180px;
/*height: 180px;*/
height: 90px;
border-radius: 50%;
border-radius: 90px/45px;
/*百分比是按横竖两个对应的方向的长度进行计算*/
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h3>CSS3 边框圆角</h3>
</header>
<div class="main">
<div class="item" data-brief="整圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="拱形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="饼环">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="对角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四边不同色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右红透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="消息框">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="QQ对话">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆角百分比">
<div class="border-radius"></div>
</div>
</div>
</div>
</body>
</html>
```
效果如下:
20180208_1730.png
## 爱心
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.heart {
width: 200px;
height: 300px;
/*border: 1px solid #000;*/
margin: 100px auto;
position: relative;
}
.heart::before, .heart::after {
content: "左一半";
width: 100%;
height: 100%;
position: absolute;
background-color: red;
left: 0;
top: 0;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
text-align: center;
line-height: 100px;
color: yellow;
font-size: 30px;
font-family: "MIcrosoft Yahei";
}
.heart::after {
content: "右一半";
left: 71px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart">
</div>
</body>
</html>
```
效果如下:
20180208_1737.png
它其实是下面这两个盒子叠起来的:
20180208_1738.png
改变 `.heart::after` 的 left值即可叠起来。

File diff suppressed because it is too large Load Diff