小白都能学会的css
在学习之前，我们先来认识一下css这位人物的作用
css 相当于美化工具，就是在事物原有的基础上对外表进行修饰和包装，跟ps、美图秀秀等类似，只不过，css 是美化的对象是html 文本，是一个超文本标记语言。
我们现在已经简单了解了css 的作用，但了解只是开始，并不能满足于我，所以我想亲手去实践，我相信在看的你，也非常急切的想动手试试看。
今天我们就只学习border 这个属性。
因为css是作用在html文件上的，所以我们先建一个html 文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="-utf-8">
<title>border学习</title>
</head>
<body>
<div>
</div>
</body>
</html>在body 中，我创建了一个空的div 标签，但是没有内容，所以你是看不到的，现在我给它一个css 中的border 属性，给它设置宽 width:100px 、高 height:100px 和边框宽度 border-width:1px; 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="-utf-8">
<title>border学习</title>
<style>
div{
width:100px;
height:100px;
border-width:1px;
border-style:solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>你写好了吗？写好了我们就打开浏览器看看效果吧~
我们先看下代码，添加样式的其中一种方法就是在head 的标签中添加style 标签，并在该标签下为body 下的div 标签添加css样式，这种方法我们称它为内联样式。
因为这里只有一个div 标签，所以我直接采用标签名指定目标，属性需要添加在大括号{}内哦~
属性就是冒号：左边的内容，那么右边对应的就是属性值，你可以把冒号想象成等于号=，这样会更容易理解和记忆。
图中用矩形标注的内容对应的就是title 标签中的内容，箭头指的正方形，就是我们刚才添加css 后的效果 。我们只是设置了边框的宽度，用的是 border-width:1px;,但我们并没有是设置颜色，所以我们可以得知，边框的颜色默认是黑色的~
现在我想要把边框颜色变成红色，那么我会这么做
<style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-style:solid;
border-color:red;
}
</style>我添加了border-color:purple;，我们来看看效果
我们可以看到，边框颜色确实变成了红色，当然你也可以改成其他颜色。这里要说下，颜色的表示方法有三种，分别是rgb(255，0，0)、#ff0000、red ,这三种都可以表示红色。
有时候你可能会看到有些边框是虚线的，没事，我们也可以，只要这么做
<style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-style: dashed;
border-color:red;
}
</style>通过设置 border-style:dashed;来改变边框的样式，来看看效果
呃。。有点不好看，所以我们一般不怎么用，一般都是用前面写到的solid 这个属性值，当然，属性值不只这两个，但是其他的不常用，所以这里就不说了，感兴趣的话可以自行查找
目前我们已经写了5行样式了，会不会觉得有点长，有点占空间是不是？好，接下来，我把它缩写一下，看代码
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
}
</style>缩写完后只剩下3行了，减少了2行的空间。需要注意的是属性值的顺序：宽度->样式->颜色，然后中间是用空格隔开而不是用逗号哈~这种方式叫做复合写法。
当然，我们也可以针对边框的任意一边设置样式，四个方向分别是上top、左left 、下bottom、右right
我只要在上边添加边框就可以这么写 border-top:1px solid red; 来看下效果
说明这样写时没问题的 ，剩下的三个边你来尝试一下哦~
em~有时候做事需要圆滑一点，所以我也想让矩形变成圆圆的，那就添加一个样式叫做 border-radius:50%; 代码如下：
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
border-radius:50%;
}
</style>一起来看下效果
嗯，一个圆就这样出来了~其中50% 是指将矩形的长宽的一半作为半径，原点就在两条对角线的交点上，然后对裁剪掉圆外的部分，这样就变成一个圆啦~当然，有个前提条件就是这个矩形必须是正方形，不然得到的就是椭圆了，不信你试试
可我不想把矩形的四个角都变成曲线，而是只改变一个角，这样能不能做到？
答案肯定是可以的，现在跟你说道说道
我不设置50% 而是用像素单位px 来做这个圆，来看看它是怎么形成的
首先 我先设置一个属性值border-radius:50px，来看看图形有什么变化
好，我们会发现没什么变化，那设置两个参数 border-radius:50px 0px; 来看下效果
显示的不是一个圆，我用黑色圆圈标注的两处是直角，对应的参数是0px，用紫色圆圈标注的是曲线，对应的参数是50px。所以结合上面设置的参数，可以得出这么一个结论：当有两个参数时，第一个参数对应了左上和右下 ，第二个参数代表了左下 和右上
我们继续，将参数设置为三个 border-radius:50px 0px 0px;，来看下效果
原本右下角是曲线，现在变成了直角，这也就说明了当有三个 参数时，第一个参数对应着左上，第二个参数对应着左下和右上，第三个参数对应着右下
那我问个问题，你们来思考：如果我设置了4个参数，那么图形将会变成什么样？这4个参数又分别代表那几个角？
最后咱们总结一下本文的内容：
- border-width:边框的宽度
- border-color:边框的颜色
- border-style:边框的样式
- border中宽度、样式、颜色的复合写法
- border-radius:边框的圆角