hc学习平台

 找回密码
 立即注册
搜索
热搜: 活动 交友 javakc
 › 学习交流 › CSS › css中,设置边框的边框样式用什么属性
查看: 2283|回复: 10
打印 上一主题 下一主题

css中,设置边框的边框样式用什么属性

[复制链接]

2249

主题

0

帖子

0

博客

admin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

跳转到指定楼层
楼主
发表于2015-04-22 07:29:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1181

帖子

2

博客

yjz123456

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-17 20:49:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border-style

0

主题

785

帖子

2

博客

撸天啦

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-18 20:15:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<style>

table{

  border:粗细 线 颜色;

}

th,td{

border:1 red

}

</style>

0

主题

956

帖子

2

博客

aduo

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-19 20:29:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border

宽度,样式,颜色

0

主题

826

帖子

2

博客

Java攻城狮

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-20 10:37:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

table{

    border:1 solid yellow

}

tr,td,div{

    boreder:1 solid yellow

}

div{


}


0

主题

957

帖子

2

博客

zxjc

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-20 10:45:36 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
css中设置边框样式用border-style来设置。

0

主题

1450

帖子

0

博客

Sarbr

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:30:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1451

帖子

0

博客

gaoye

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 19:07:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border 属性


0

主题

1700

帖子

0

博客

song

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 19:11:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数:
 
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边
 
说明:
 

要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
如果border-width不大于0,本属性将失去作用。
对应的脚本特性为borderBottomStyle。请参阅我编写的其他书目。
 
示例:
 
body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; }

0

主题

1510

帖子

0

博客

zhangjialong

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 19:13:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1636

帖子

0

博客

renmihe

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 09:13:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

设置边框的样式要使用border

语法:border : border-width || border-style || border-color 

示例:p {

      border: thick  double  yellow; 

           }

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

medium :  默认宽度
thin :  小于默认宽度
thick :  大于默认宽度
length :  由浮点数字和单位标识符组成的长度值。不可为负值。


如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
如果border-style设置为none,本属性将失去作用。
对应的脚本特性为borderWidth

示例:span { border-style: solid; border-width: 1px thin; }

2.border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的border-width
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边
 

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
如果border-width不大于0,本属性将失去作用。
对应的脚本特性为borderStyle

示例:body { border-style: double groove; }
3.border-color : color
 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
如果border-width等于0或border-style设置为none,本属性将失去作用。
对应的脚本特性为borderColor

示例:body { border-color: silver ;red; }

沙发
发表于2016-08-31 19:30:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

•border-width

•border-style

•border-color

0

主题

872

帖子

0

博客

杨柳

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 20:13:47 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<style>

border:1;color:red

</style>

0

主题

1576

帖子

0

博客

liufangyuan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 08:36:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border属性,是一个复合属性,其中有border-width || border-style || border-color


0

主题

1402

帖子

0

博客

马鹏磊

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 08:46:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<table border="1"></table>

<style>

table{

border:1 solid yellow;

}

    

 

</style>

 

 

0

主题

1721

帖子

0

博客

XIAOC

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 09:19:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
WR

0

主题

1674

帖子

0

博客

WR

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-02 09:05:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

边框

table{border:thick solid yellow}

td,th,div{border:1 solid red}

0

主题

1518

帖子

0

博客

Cracia

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-09 15:15:10 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

bord

table{

    border:1 solid red;

    border-collapse:collapse;

}

th,td,div{

    border: 1 solid red;

}

0

主题

465

帖子

0

博客

李世泽

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-12-01 09:17:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border

0

主题

447

帖子

2

博客

Amylau

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-03-31 07:30:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border:border—width border-style border-color

table,td,th,div{

border:thick,solid,red

}

0

主题

1902

帖子

0

博客

王之神判

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-11 12:29:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border

0

主题

1932

帖子

0

博客

740317431

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-11 12:48:41 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
可以在标签中引用 style="border:1px solid #000"
zxx

0

主题

1135

帖子

0

博客

zxx

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-15 20:25:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border

0

主题

651

帖子

0

博客

hanqian

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-17 08:59:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
 

border-top : 1px dotted #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*
下框线*/
border-left : 1px solid #6699cc; /*
左框线*/  
border-right : 1px solid #6699cc; /*
右框线*/
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*
设置上框线top宽度*/
border-top-style : solid/*
设置上框线top样式*/
solid /*
实线框*/
dotted /*
虚线框*/
double /*
双线框*/
groove /*
立体内凸框*/
ridge /*
立体浮雕框*/
inset /*
凹框*/
outset /*
凸框*/

gym

0

主题

647

帖子

0

博客

gym

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-17 16:05:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border: border-width  border-style  border-color

0

主题

1694

帖子

0

博客

wulinan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-17 19:57:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
border

0

主题

741

帖子

0

博客

lilin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-09-02 18:58:12 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

border-top : 1px dotted #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/



站点统计|举报|Archiver|手机版|小黑屋|Comsenz Inc.

GMT+8, , Processed in 0.195171 second(s), 9 queries .

Powered by javakc! X1.0

© 2004-2014 javakc

f1208.com 备案号:京ICP备14030918号-1

返回顶部