border-bottom: #e0e0e0 1px solid;是什么意思?
1、#e0e0e0 :表示给边框底部的一种颜色;
2、1px:表示边框底部的宽度;
3、solid这表示边框底部的样式;
4、border-bottom表示对边框的底部进行设置;
border-bottom 属性是一种复合属性,用于设置对象的下边框的宽度、样式和颜色值。
所有未由 border-bottom 复合属性设置的单独边框属性都将设置为其默认值。例如,width 的默认值为 medium 。
如果未指定颜色,则使用文本颜色。
如果我想给div下面或者右边显示边框,就一条线,请问代码怎么写呢
具体代码如下:代码解释:border-bottom 下边框 border-left 左边框 border-right 右边框 border-top上边框以border-bottom:solid 1px green为例解释:border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性:border-width 规定边框的宽度。 border-style 规定边框的样式。border-color 规定边框的颜色如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。拓展资料:DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 ,那么该标签的作用会变得更加有效。注释: 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用 元素来组合块级元素,这样就可以使用样式对它们进行格式化。
【css】边框border的属性和使用方法
顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用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:
深入理解border属性
1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分,所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.
1 .1px
2 .thin:1px
3 .medium:3px,默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px
1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样
2 .solid:实线
3 .dashed:虚线 :颜色区和透明区的比例所占的不一样,chrome是2:1,IE,火狐是3:1
4 .dotted:圆点边框
5 .double:双线板框。线框的表现还和宽度有关系,宽度不同最后的表现也不一样
6 .其他:inset(内凹),out(外凹),沟槽(groove),ridge(山脊)
1 .border-color默认颜色是color色值,如果没有指定边框颜色,就会使用color的颜色,outline,,box-shadow,text-shadow也是这样
1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位,而不能相对右下角.一个宽度不固定的元素,我们需要在距离右边缘50像素的位置设置一个背景图片
2 .增加点击区域大小:通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;
3 .三角形绘制
1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box
1 .center:居中图片
2 .top.left
1 .上面构造出来的全等三角形,其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0,就可以只显示左边的,实现一个直角三角形