border的奇思妙想

这是我刚开始学习前端的第一节课，想来记录一下自己的前端路程，从今以后，我将在这里分享自己的心得体会，同时也可以加深自己的印象，希望可以迈进前端大军的行列中。加油！

首先是border的正常的使用

<style>
	.border{
		width:100px;
		height:100px;
		border:1px solid #234323;
	}	
</style>
<div class="border"></div>

其中border是一个复合样式，border中可以写border-width,border-style,border-color的值，同时，复合属性不只有border,还有border-top,border-right,border-bottom,以及border-left,那么我们现在来看看每一个属性可能的取值吧。

border-color属性

border-color描述的是边框的颜色

值的种类	书写的例子
直接写颜色的名字	blue，yellow，red等
十六进制的颜色表示	#999999，#000000
rgb（）	rgb（255,255,255）
透明	transparent

同时还可以写rgba，这个最后的a代表的是透明度，为0-1之间的数字，1代表不透明，0代表完全透明。

border-style属性

border-style描述的是边框的样式

值的种类	书写的例子
实线	solid
点线	dotted
虚线	dashed

border-width属性

这个想必不用说了吧，大家都知道，它表示的边框的宽度。单位为px。

border-radius属性

我们给一个div加上这样的样式，会有什么效果产生

width:200px;
height:200px;
background-color:yellow;
border-radius:50%;

属性的多值书写

border-color：#fff,#000,#999,#444;
border-style:dashed solid dotted;
border-width:1px 2px;

看到这里，就会有人有疑问了，多值到底可以书写几个值呢，那么不同的值所代表的位置有什么不同呢，来让我们看一下吧！

一个值：上下左右四个值相等
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左

利用border制作三角形，扇形，半圆，椭圆等

三角形
给div加上以下的样式

            width: 0;
            height: 0;
            border: 100px solid teal;
            border-color: teal transparent transparent transparent;

扇形
给div加上以下的样式

            width: 0;
            height: 0;
            border: 100px solid rosybrown;
            border-radius: 50%;
            border-color: rosybrown transparent transparent transparent;

半圆
给div加上以下的样式

            width: 0;
            height: 0;
            border: 50px solid #000;
            border-radius: 50%;
            border-color: #000 #000 transparent transparent;

椭圆
给div加上以下的样式

            width: 200px;
            height: 100px;
            border: 4px solid forestgreen;
            border-radius: 50%;

好了，这篇就到这里了，下篇我们来探讨对于相邻边框颜色不同会出现斜角的解决办法，现在我们就可以发表自己的想法了，下篇再见！