您的位置:首页 > DIV CSS实例 > 【 返回上一页

设置div边框

设置div边框border样式

对div设置边框ThinkCSS给大家介绍三种方法。

首先找到边框CSS单词:border边框border基础教程

一、直接div标签内设置边框

1、div边框实例代码

  1. <div style=" border:3px solid #F00">设置div边框厚度3px,实线红色边框</div> 

2、效果截图

style直接标签内设置div的边框
style直接标签内设置div的边框

3、说明
直接对div标签内使用style属性并直接设置css边框即可。

二、外部CSS对div设置边框

1、CSS代码

  1. .exp{ border:1px dashed #00F} 

2、HTML代码

  1. <div class="exp">设置div边框厚度1px,虚线蓝色色边框</div> 

3、实例截图

使用外部css设置div边框实例截图
使用外部css设置div边框实例截图

特别说明这里CSS代码放HTML页面内,并使用style标签。如果是放入外部CSS文件,CSS代码直接放CSS文件内,就不需要style标签。

三、通过div父级对其设置边框样式

1、实例CSS代码

  1. .abc div{ border:4px solid #090} 

2、HTML代码

  1. <div>我在DIV内但是没有边框</div> 
  2. <div class="abc"> 
  3.     <div>我在DIV内但是父级是class=abc 所以我这个DIV有边框</div> 
  4. </div> 
  5. <div class="abc">我虽然是在class=abc内,但是我没有在此子级div内</div> 

3、效果截图

div父级指定DIV边框设置
div父级指定DIV边框设置

4、说明
从以上实例,同样在div内,因为div父级不是.abc所以没有边框样式。因为class=abc本身没有设置CSS边框,只对class=abc子级div设置边框,所以看见以上效果。

仔细思考掌握以上各种对DIV设置边框方法。

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

日期:2016-11-17 14:15:37 来源:www.thinkcss.com 作者:div+css

热门点击