一、width（宽度）和height（高度）

不是所有的html元素都可以设置宽高的。

像div一样的块状对象可以设置宽高，但是像a、span一样的内联对象就不可以设置宽高，除非先转换成块状对象。

如果对块状，内联对象不清楚的童鞋，可以先看这篇文章：

CSS万博manbext备用网址：display常用的四个值（block,inline,none,inline-block）

width和height常用的单位有固定的像素值（px）和百分比（%）。

<div class="box"></div>

.box{
	width:150px;
	height:150px;
	background-color:#F90;}

效果如图：

二、border（边框）

几乎可以为绝大部分的html元素添加边框，包括块状、内联对象。a、span等内联对象也是可以添加边框的。

语法结构：

border:width style color;

border有三个属性值，width（边框宽度），style（边框样式），color（边框颜色），其中，style是必须的值，不能缺省。宽度和颜色可以缺省，如果不设置这两个值，则默认用medium（中等粗细的边框）和黑色代替。

width有这几个值：thin（细）、medium（中等）、thick（粗）、自定义值（一般是固定像素，比如1px）。

style有好几个值，不过最常用的是这两个：solid（实线）、dashed（虚线）。

color：表示颜色的十六进制，比如#000（黑色），当然也可以用代表颜色的单词，比如blue（蓝色），不过不建议这样用。

1、首先一个对象有四条边，如果每一条边样式一样，则可以写成：

.box{
	width:150px;
	height:150px;
	background-color:#F90;
	border:5px solid #333;/*四条边都一样，可以用border的总属性*/
}

效果如图：

2、如果每一条边样式不一样，则可以单独定义四条边，上右下左顺时针方向定义。

.box{
	width:150px;
	height:150px;
	background-color:#fff;
	border-top:5px solid #12A8B4;
	border-right:5px solid #CD640E;
	border-bottom:5px solid #E4BA0E;
	border-left:5px solid #13C621; }

效果如图：

3、当然，如果三条边一样，一条边没有，则可以这样定义，border的默认值就是none（没有边框）：

.box{
	width:150px;
	height:150px;
	background-color:#fff;
	border:5px solid #12A8B4;
	border-bottom:none;/*没有边框*/
 }

效果如图：

4、还可以定义好边框后，单独修改边框的颜色、样式、粗细等值。

border-color/*边框颜色*/

border-style/*边框样式*/

border-width/*边框宽度*/

.box{
	width:150px;
	height:150px;
	background-color:#fff;
	border:5px solid #12A8B4;
	border-color:#F09;/*重新设置边框的颜色*/
 }

border还有很多衍生出来的二级和三级属性，只要掌握了上边框（top）、右边框（right）、下边框（bottom）、左边框（left）、宽度（width）、样式（style）、颜色（color）的含义，就可以根据规律掌握其他属性了。

5、还有一个CSS3新增的border-radius（边框圆角）属性，非常有用。

设置四个角的半径值，可以产生圆角，方向也是根据上右下左顺时针方向设置。

四个值的时候：

border-radius:左上角 右上角 右下角 左下角;

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:20px 50px 30px 100px;
 }

三个值的时候：

border-radius:左上角 右上角左下角  右下角;（对角线是一样的）

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:20px 75px 30px;
 }

两个值的时候：

border-radius:左上角右下角   右上角左下角;（对角线是一样的）

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:20px 50px;
 }

一个值的时候：

border-radius:四个角的半径值;

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:10px;
 }

如果半径值是正方形容器宽高的一半，则产生圆形。

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:75px;
 }

如果为容器添加背景图片，背景图片也可以产生圆形。

.box{
	width:150px;
	height:150px;
	background-color:#F1419D;
	border-radius:75px;
	background: url(images/flower.jpg) no-repeat;
 }

效果如图：

·

做万博manbext备用网址很累的，留个言鼓励一下呗！