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也是允许的。
顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用border属性。
边框样式border-style必须写!否则其它属性全部失效。
边框的样式:
border后面可跟多个值,中间用空格分离,含义如下:
注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。
——以上规律在padding和margin一样适用。
边框样式border-style必须设置
如果我们的四条边框属性都是一样的,那么统一设置就可以啦,注意边框类型不可省略。
首先我们放置一个宽高为200px的粉色盒子。
接下来我们为它加上一条宽度为10px,样式为实线,颜色为红色的边框。
我们可以看到,添加边框的时候,是在盒子外面套一圈边框,而不是加在里面,在Chrome浏览器中点击右键检查,可以看到div的大小变成了220x220。
套在外面的边框的宽度是会加进盒子尺寸的(上下左右各增加了10px),如果我们想盒子保持大小不变,要对div本身的width和height进行减小,在这个样例中,通过计算可得,减少到180px即可保持大小不变。
当我们使用点状、虚线等边框样式时,多出来的缝隙,会使用元素本身的 背景颜色 填充。
点和虚线的具体样式,不同浏览器中可能会不一样。
我们为刚刚的盒子设置上边框为红色,左边框为绿色,效果如下图所示:
我们会发现在两条边框交界处的小方块,通过一条对角线分隔,上边框和左边框各占一半。当边框不一样宽时,同样也是用对角线把交界处的小长方形一分为二,如下图所示:
当被添加边框的元素宽度为0,不设置高度(高度默认是0)的情况下,我们可以巧妙利用 边框组合 和 transparent(透明) 绘制三角形,可以体验下哦。
三角形1-css:
三角形2-css:
多彩三角形-css:
绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css:
梯形2-css: