您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古十一选五走势:border【css 边框】 属性教程

CSS bordercss 边框border基础教程

border简述
border在网页布局中是设置对象边框样式,比如给图片加边框,对div加边框都是使用border样式单词实现。边框border可设置边框宽度、边框颜色、边框样式,也可单独设置上边、下边、左边、右边的边框,接下来thinkcss为大家详细介绍border基本语法结构、内蒙古11选五开奖5号的 border样式选择、css border代码写法等。

一、css border边框语法与结构

边框border同时设置三个值,边框宽度、边框颜色、边框样式(实线边框 虚线边框

语法:
border : border-width border-style border-color
如:
border:1px solid #F00
设置边框1px宽、实线(solid)、红色(#F00)

需要注意边框border css设置三个属性值,三个值之间需要半角小写空格隔开,值之间不能加其它符号比如逗号、分号,都不能加。

border边框结构解析图
border边框结构解析图

二、border CSS边框值与对应border边框样式效果

边框样式值如下:
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凸边

边框样式效果截图
边框样式style效果截图

三、border代码简写

border样式除了简写外,首先我们看看边框样式单独设置代码。

1、四个边框相同情况下CSS代码及简写
1)、边框颜色:border-color:#000(黑色)
2)、边框厚度(宽度):border-width:1px(1px宽度)
使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。
3)、border边框样式:border-style:solid(实线)

div{border-width:1px;border-color:#000;border-style:solid} 

这样设置了div边框为1px,颜色为黑色,边框为实线。从以上代码明显比较臃肿,通常我们CSS代码以简约为目标,所以要使用简写缩写的CSS代码,尽量让代码简单又不失效果。

div{border-width:1px;border-color:#000;border-style:solid} 

简写为:

div{border:1px #000 solid} 

2、单独四个边设置
以上介绍了border代码简写,通常直接对border设置三个值即可完成设置效果

以下是单独边框设置简写代码:
1)、1px黑色实线上边框
border-top:1px solid #000

2)、1px红色虚线下边框
border-bottom:1px dashed #F00

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

4)、1px红色虚线右边框
border-right:1px dashed #F00

四、边框border推荐应用几个值

上面我们介绍边框样式多种多样,实线、虚线、双线边框、3D凹槽等等样式,但由于浏览器兼容问题,通常我们常常使用样式值为:
dashed 虚线
solid 实线

五、css border应用实例

这里为大家小实例介绍border使用,分别设置两个div盒子,一个设置四边相同边框颜色;另外一个div设置四个边不同效果样式。直接上代码看看分析。为了观察效果我们对两个div设置相同宽度、高度。

1、CSS代码

.exp-a,.exp-b{ width:200px; height:100px} 
.exp-a{ border:1px solid #F00}
.exp-b{ border-left:1px dashed #F00;border-right:1px solid #F00;
border-top:1px solid #00F;border-bottom:1px dashed #00F}

代码解释如下:

.exp-a,.exp-b{ width:200px; height:100px} 

对两个div设置相同宽度、高度,共用CSS。

.exp-a{ border:1px solid #F00} 

对.exp-a设置四个边红色、1px宽度、实线。

.exp-b{ border-left:1px dashed #F00;border-right:1px solid #F00; 
border-top:1px solid #00F;border-bottom:1px dashed #00F}

对.exp-b设置左边框为1px宽度、颜色红色、虚线;设置右边框为1px宽、颜色红色、实线;设置上边框1px宽、实线、蓝色;设置下边框1px宽、虚线、蓝色

2、HTML代码

<div class="exp-a">四个边相同</div> 
<p>&nbsp;</p>
<div class="exp-b">四个边不同</div>

为了看到两个边框效果,之间加p标签隔开。

3、完整DIV CSS代码:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border css 在线演示 ThinkCSS</title>
<style>
.exp-a,.exp-b{ width:200px; height:100px}
.exp-a{ border:1px solid #F00}
.exp-b{ border-left:1px dashed #F00;border-right:1px solid #F00;
border-top:1px solid #00F;border-bottom:1px dashed #00F}
</style>
</head>

<body>
<div class="exp-a">四个边相同</div>
<p>&nbsp;</p>
<div class="exp-b">四个边不同</div>
</body>
</html>

4、截图效果

边框border CSS实例效果截图
边框border CSS实例效果截图

5、在线演示与下载

border css实例在线演示:

查看案例

border实例打包下载:

六、边框 border小结

css border 边框是在内蒙古11选五开奖5号的布局网页中,比较常用的样式属性,基本布局每个网页时候都有用到,为了各大浏览器兼容边框样式(style)常见使用虚线(dashed)和实线(solid)。边框border样式使用时候注意简写,其三个值之间空格间隔,如果连续写将失效,也不能加任何符号。更多关于border技巧性应用可到内蒙古11选五开奖5号的网站查找学习。

相关标签: 边框 border
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/912.shtml

日期:2016-06-20 10:00:14 来源:未知 作者:ThinkCSS
  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 123tk com全年历史图库 11选5辽宁玩法 山西快乐十分走势图屏 冰球用英语怎么说 奇人透码开奖结果 广西快乐十分号码走势图 京东彩票可靠吗 新时时彩app下载 香港赛马会排位表 资料及派彩 新疆十一选五体彩彩票 谁有平特鸡1赔1网站 360彩票老时时彩开奖 nba比分最高是多少 快乐双彩好运3奖金 时时彩极速赛车开奖结果