borderwidth(cssborder宽度)

admin 532 0

大家好,今天小编来为大家解答borderwidth这个问题,cssborder宽度很多人还不知道,现在让我们一起来看看吧!

一、css中border的属性

CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

在表格中:border='1'表示表格边框宽度为1px,css颜色为黑色,默认为实线样式边

(1)border-left设置左边框,一般单独设置左边框样式使用

(2)border-right设置右边框,一般单独设置右边框样式使用

(3)border-top设置上边框,一般单独设置上边框样式使用

(4)border-bottom设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

#divcss5{border:1px solid#00F}

设置了divcss5对象盒子5px像素蓝色实线边框

1)、边框颜色:border-color:#000

2)、边框厚度(宽度):border-width:1px

3)、border边框样式:border-style:solid

none:无边框。与任何指定的border-width值无关

dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)

dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)

double:双线边框。两条单线与其间隔的和等于指定的 border-width值

(4)CSS单独设置左边框、右边框、上边框、下边框:

1)、1px黑色虚线上边框:border-top:1px dashed#000

2)、1px黑色实线下边框:border-bottom:1px solid#000

3)、1px黑色虚线左边框:border-left:1px dashed#000

4)、1px黑色实线右边框:border-right:1px solid#000

默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。另一方面,如果元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(因为 color可以继承)。这个父元素很可能是 body、div或另一个 table

二、border的线粗细

1、border-width: medium| thin| thick| length

2、length:由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位

3、如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。

4、如果只提供一个,将用于全部的四条边。

5、如果提供两个,第一个用于上-下,第二个用于左-右。

6、如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

7、要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

8、如果border-style设置为none,本属性将失去作用。

9、span{ border-style: solid; border-width: thin;}

10、span{ border-style: solid; border-width: 1px thin;}

三、border在html语句里是什么意思

1、HTML语句中“border=1”是边框为1像素的意思。

2、border是 CSS的一个属性,用 border可以给能确定范围的 HTML标记(如 TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。

3、一、border-width:thin medium thick 10px;

4、上边框是细边框,右边框是中等边框,下边框是粗边框,左边框是 10px宽的边框。

5、二、border-width:thin medium thick;

6、上边框是 10px,右边框和左边框是中等边框,下边框是粗边框。

7、上边框和下边框是细边框,右边框和左边框是中等边框。

8、dotted定义点状边框。在大多数浏览器中呈现为实线。

9、dashed定义虚线。在大多数浏览器中呈现为实线。

10、double定义双线。双线的宽度等于 border-width的值。

11、groove定义 3D凹槽边框。其效果取决于 border-color的值。

12、ridge定义 3D垄状边框。其效果取决于 border-color的值。

13、inset定义 3D inset边框。其效果取决于 border-color的值。

14、outset定义 3D outset边框。其效果取决于 border-color的值。

15、inherit规定应该从父元素继承边框样式。

四、CSS border(边框)样式写法总结

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-top-style:设置元素上边框样式

 border-right-style:设置元素右边框样式

 border-bottom-style:设置元素下边框样式

 border-left-style:设置元素左边框样式

  hidden:隐藏边框。对于表,hidden用于解决边框冲突。

  dotted:点状边框。

  dashed:虚线边框。

  solid:实线边框。

  double:双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove:3D凹槽边框。

  ridge:3D垄状边框。

  outset:凸边框。

1.5设置上边框宽度、样式、颜色

1.6设置右边框宽度、样式、颜色

1.7设置下边框宽度、样式、颜色

1.8设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _

五、div+css如何设置边框border

元素的边框(border)是围绕元素内容和内边距的一条或多条线。控制边框的属性是 border属性。边框在HTML元素的修饰中几乎无时无刻都会用到,给网页设计带来更丰富的视觉体验,通过 CSS border属性允许你规定元素边框的样式、宽度和颜色。--------------------------------------------------------------------------------边框与背景最新CSS2.1作出了解释:元素的背景是包括内容、内边距和边框区。也就是说,当边框是间断的(例如,虚线),在边框间断的地方应该显示的是背景。大多数浏览器都遵循 CSS2.1定义,不过一些较老的浏览器可能会有不同的表现。--------------------------------------------------------------------------------边框的样式边框样式将是所有网页设计师最为关心的一点,丰富的样式将会带来更美观的页面设计。CSS的 border-style属性定义了 10个不同的样式,包括 none。例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起的按钮”:img{border-style:outset;}--------------------------------------------------------------------------------定义多种样式同理,您可以为一个边框定义多个样式,例如:.more{border-style: solid dotted dashed double;}上面这条规则定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。--------------------------------------------------------------------------------定义单边样式如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4个边的边框样式,可以使用下面的单边边框样式属性:1. border-top-style2. border-right-style3. border-bottom-style4. border-left-style因此这两种方法是等价的:.noleft{border-style: solid solid solid none;}

.noleft{border-style: solid; border-left-style: none;}注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style之前,简写属性的值就会覆盖单边值 none。--------------------------------------------------------------------------------边框的宽度您可以通过 border-width为边框指定宽度。为边框指定宽度有两种方法:1.可以指定长度值,比如 3px或 1em;2.使用 3个预设值,它们分别是 thin(细)、medium(普通,默认值)和 thick(粗)。所以,我们可以这样设置边框的宽度:.wid{border-style: solid; border-width: 5px;}或者:

.wid{border-style: solid; border-width: thick;}注释:CSS没有定义 3个关键字的具体宽度,所以一个用户代理可能把 thin、medium和 thick分别设置为等于 5px、3px和 2px,而另一个用户代理则分别设置为 3px、2px和 1px。--------------------------------------------------------------------------------定义单边宽度您也可以通过下列属性分别设置边框各边的宽度:1. border-top-width2. border-right-width3. border-bottom-width4. border-left-width所以可以这样定义:

border-left-width: 15px;}--------------------------------------------------------------------------------为什么没有边框?在前面的例子中,您已经看到,如果希望显示某种边框,就必须设置边框样式,比如 solid或 outset。那么如果忘记设置 border-style属性会出现什么情况呢?h1{border-width: 20px;}尽管边框的宽度是 20px,但是在没有定义border-style属性的情况下,无论设置了宽度为多少,会自动将宽度设置为0。

提示:这一点非常重要。事实上,因为忘记声明边框样式是一个初学者常犯的错误。--------------------------------------------------------------------------------边框的颜色设置边框颜色非常简单。CSS使用border-color属性来控制边框颜色,它一次最多可以接受4个颜色值。您可以使用任何类型的颜色值,包括类似命名颜色(red),RGB,十六进制:.col{

border-color: red;}提示:如果没有为边框声明颜色,默认情况下它将与元素的文本颜色相同。另外,如果元素没有任何文本,则继承父元素的文本颜色,以此类推。--------------------------------------------------------------------------------定义单边颜色还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:1. border-top-color2. border-right-color3. border-bottom-color4. border-left-color要指定实线黑色边框,而右边框为实线红色,可以这样指定:.bla{

关于borderwidth的内容到此结束,希望对大家有所帮助。