在写网页的时候，会遇到需要装饰一些几何图形的情况，用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真，文件的占用空间较小，也可以减少http的请求。
（2）.知识解析
在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现
border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时，相对的是包含边框，padding后的尺寸。而不是单纯地相对于width/height值。
旋转 rotate
用法：transform: rotate(45deg);
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
缩放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
倾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
移动 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离
圆形/椭圆形
.circle{
width:10rem;
height:10rem;
border-radius:50%;
background:orange;
}
椭圆形只需改变矩形的边长
三角形/梯形
.triangle{
margin-top:5rem;
width:0;
border-bottom:5rem solid#00a000;
border-left:5rem solid transparent;
border-right:5rem solid transparent;
}
梯形只需设定width的值即可
平行四边形
.parallelogram{
margin:5rem;
width:10rem;
height:5rem;
transform:skew(30deg);
background:orange;
}
（3）css绘制三角形的原理
首先来看一下正常块元素设置四条不同颜色边框效果：为了效果明显，所有边框宽度均为50px；
上图 html 和 css 代码如下：
.test-border{
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000;
border-left:50px solid #ff7f50;
border-right:50px solid #436eee;
}
当我去掉内容时
效果如下：
.test-border{
width:0;height:0;
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000;
border-left:50px solid #ff7f50;
border-right:50px solid #436eee;
}
我相信，看到上面效果图，距离实现三角形四个方向带箭头已经不远了，
如果我们将上图的下边框颜色设置为透明，即 border-right: 50px solid transparent;
效果如下：
如果我们我们去掉 border-right ，效果相信大家都能猜到，CSS 和 如下图所示：
.test-border{
width:0;
height:0;
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000
;border-left:50px solid #ff7f50;
}
我们将上边框和下边框的颜色设置成透明
.test-border{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid #ff7f50;
}
便得到了一个左三角形
（4）如何绘制一个简单的气泡框
HTML部分
<div class="tip">
<div class="tri">
</div>
</div>
css部分:
.tip{
width:20rem;
height:4rem;
background:#b9e9f5;
position:relative;
margin-bottom:5rem;
}
.tri{
width:0;
height:0;
position:absolute;
top:4rem;
left:10%;
border-top:1.8rem solid#b9e9f5;
border-right:0.9rem solid transparent;
border-left:0.9rem solid transparent;
}
2.vertical-align
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
3.line-height
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
4.区别
4.1 title与h1的区别
定义：title是网站标题，h1是文章主题
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的，一般在网页中出现一次。
4.2 b与strong的区别
定义：b(bold)是实体标签，用来给文字加粗，而strong是逻辑标签，作用是加强字符语气。
区别：b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言； 而strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式
建议：为了符合CSS3的规范，b应尽量少用而改用strong。
4.3 i与em的区别
定义：i(italic)是实体标签，用来使字符倾斜，而em(emphasis)是逻辑标签，作用是强调文本内容
区别：i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语（比如「de facto」这样的英语里常用的拉丁语短语）；而em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
建议：为了符合CSS3的规范，i应尽量少用而改用em
4.4 src与href的区别
定义：href指定网络资源的位置建立链接或关系，用在link和a等元素上。src将外部资源嵌入到当前标签所在位置，如img图片和js脚本等。
区别：我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。 浏览器解析src属性时，会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕。 浏览器解析到href的时候会识别该链接内容，对其进行下载不会停止对当前文档的处理。
5.基本已经完成任务6
明天计划的事情：
1.提交任务6完成任务总结
2.学习bootstrap
3.开始任务7
评论