CSS设置div边框颜色宽度和高度步骤如下:
1、新建一个html文件,创建一个类名为wrap的div。
2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色(没有边框时方便看出来div的大小)。
3、通过div 的border属性控制边框颜色,设置border的宽度为2px,线型为实线,颜色为蓝色。
4、这样就可以设置div边框颜色宽度和高度,如下图:
扩展资料:
css border属性:
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
border-width,border-style,border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000也是允许的。
指定的<table>为细边框,把<table>放在<div>中即可。
一、首先新建表格,代码如下:
<table width="500" border="1"> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr> <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr</table>。
二、在table里加css样式,代码如下:
<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse"> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td </tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></table>。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离,border-collapse:collapse表示表格的两边框合并为一条即可。
border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法:border: border-width | border-style | border-color
border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。
border-top-width:设置元素上边框宽度
border-right-width:设置元素右边框宽度
border-bottom-width:设置元素下边框宽度
border-left-width:设置元素左边框宽度
border-style :边框样式。
border-top-style:设置元素上边框样式
border-right-style:设置元素右边框样式
border-bottom-style:设置元素下边框样式
border-left-style:设置元素左边框样式
属性值有:
none:无边框。
hidden:隐藏边框。对于表,hidden 用于解决边框冲突。
dotted:点状边框。
dashed:虚线边框。
solid:实线边框。
double:双线边框。两条单线与其间隔的和等于指定的border-width值。
groove:3D凹槽边框。
ridge:3D垄状边框。
inset:凹边框。
outset:凸边框。
border-color :边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同,样式相同
1.4 四条边颜色相同,样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _