【css】边框border的属性和使用方法

html-css022

【css】边框border的属性和使用方法,第1张

顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用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:

DIV用CSS定义边框为实线,但为什么预览的时候不显示。 <div>可定义文件中的分割槽或节,可以把文件分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id 应用额外的样式。CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等档案样式的计算机语言。

建议你的你的程式码发一下,如果自己除错的话,可以给些DIV加一个背景,宽高来测试一下:

<style>.test{width:100pxheight:100pxborder:solid 1px #000}</style><div class="test">这里是测试</div>

word底边框列印预览不显示

建议你在你需要开启的档案后,点选列印----点选“印表机属性”-------点开后选择“效果”点开后-----选择“调整尺寸设定”----选择“列印文件于A4” 后确定和储存就好了。

为什么我用IEBOOK做的电子杂志预览的什么时候什么也不显示, 做的时候什么也有就是预览的时候不显示了?

呵呵 你那就不要做了这个问题我问过官方,官方都没给过很好的答案,放弃iebook吧。

很垃圾的软体。你搜索一下自由随风部落格哪里有介绍的

excel表格设定了边框,为什么列印预览了不显示,就显示上面打字的表格有边框,下面不显示。

你是说空白表格不显示边框吗?你在页面设定中把列印网格线选上试下。一般不会出现这种情况的。

为什么我画的虚线不显示为虚线,都显示为实线

所画虚线在萤幕上看起是实线,其原因是当前图形所用虚线的线型比例过大或过小所至,重新进行设定以使显示的线型能反应实际情况。虽然你看起来是实线但它确是虚线。方法:1、线上型管理器中全域性比例框中改变数值,这将影响全部同一种线型的比例;2、选定图形中的线然后在特性管理器中改变线型比例,这个比例只影响当前图形。要注意,如果在莫形中的线型看起来合适,可能在布局中就变了,这主要是图的大小不同造成的,需根据目标来设定。所谓线型比例就是线型中的元素(如虚线中的线段)在单位长度内的重复次数,或理解为元素的长短,比例越小,重复的次数越多或元素越短,反之越长。预设为1

用dreamweaver做网页时插入一个flash为什么预览的时候不显示呢

在工具——inter选项中——高阶——允许活动内容在我的计算机上执行勾上就可以了

Excel 为什么列印预览显示不出边框

如果确信在做表时加了表格线,预览时不能显示。那也没关系,列印时会显示的。下面简单地介绍设定表格边框的方法。1、选中要设定边框的区域。点选格式工具栏“边框”右侧倒三角,弹出“边框型别”,选择“所有框线”。2、选择所有框线的结果如图3、预览如图:4、这里预览显示也没有上边两根横线和左边一条竖线。没关系,放大一下会看到的。

excel 分页预览 为什么不显示虚线

开启Excel文件,点选上面选单中的“检视”->“分页预览”,即可看到效果了。

cad问题 为什么我画的虚线不显示为虚线,都显示为实线,

线形控制是选的虚线吧,如果是的话就是比例问题了,不要选中栅格,然后放大图纸,就应该能显示虚线了。

个人感觉你是线形选的不对,建议先检查此设定,在工具栏上就能直接设定。

excel为什么列印预览显示内边框不全

如果确信在做表时加了表格线,预览时不能显示。那也没关系,列印时会显示的。

下面简单地介绍设定表格边框的方法。

1、选中要设定边框的区域。点选格式工具栏“边框”右侧倒三角,弹出“边框型别”,选择“所有框线”。

2、选择所有框线的结果

4、这里预览显示也没有上边两根横线和左边一条竖线。没关系,放大一下会看到的。

要给h三盒子设置1px红色实线边框正确的css代码是color:red。color:red代码意思是将边框线变红,css是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。