首页>前端教程>CSS教程

CSS第四课:元素的width、height、border属性


一、width(宽度)和height(高度)

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

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

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

CSS教程:display常用的四个值(block,inline,none,inline-block)

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

<div class="box"></div>
.box{
	width:150px;
	height:150px;
	background-color:#F90;}

效果如图:

设置宽高的div.png

二、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的总属性*/
}

效果如图:

设置了border的div.png

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; }

效果如图:

用border定义四条边.png

3、当然,如果三条边一样,一条边没有,则可以这样定义,border的默认值就是none(没有边框):

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

效果如图:

用border定义三条边.png

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设置圆角.png

三个值的时候:

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

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

border-radius设置圆角半径.png

两个值的时候:

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

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

border-radius设置圆角半径值.png

一个值的时候:

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

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

border-radius设置圆角值一样的时候.png

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

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

border-radius产生圆形.png

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

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

效果如图:

border-radius产生圆形背景图片.png·

做教程很累的,留个言鼓励一下呗!

点赞


17
保存到:

相关文章

  • 评论列表:
  •  憨豆
     发布于 2016-06-04 16:04:13  回复该评论
  • 感谢赵老师的分享,对我很有用,继续,加油哦。

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top