DIVCSS边框宽度怎么设置

这篇文章主要介绍“DIV CSS边框宽度怎么设置”,在日常操作中,相信很多人在DIV CSS边框宽度怎么设置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”DIV CSS边框宽度怎么设置”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联2013年至今,是专业互联网技术服务公司,拥有项目做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元荔波做网站,已为上家服务,为荔波各地企业和个人服务,联系电话:13518219792

一、CSS样式与语法 

边框样式单词:border

css边框语法
1、border-left:1px solid #000 设置对象左边1px实线黑色边框
2、border-right:1px solid #000 设置对象右边1px实线黑色边框
3、border-top:1px solid #000 设置对象上边1px实线黑色边框
4、border-bottom:1px solid #000 设置对象底边1px实线黑色边框
5、border:1px solid #000 设置对象四边1px实线黑色边框

二、边框宽度如何设置 

我们在border样式的值里使用具体数字+单位即可设置边框宽度情况。如果不设置这一参数,只设置其它参数值,边框将为0,也就是无边框显示(边框设置失败)。

小试牛刀:
.div1{border:1px solid #000}/* 设置对象".div1"边框宽度为1px */
对应HTML代码部分应用:

.diva{border:2px solid #000}/* 设置对象".diva"边框宽度为2px */
对应HTML代码部分应用:

.div2{border:3px solid #000}/* 设置对象".div2"边框宽度为3px */
对应HTML代码部分应用:

三、HTML DIV边框宽度实践实例 

我们设置3个DIV盒子,分别CSS 命名为“.div1”、“.div2”、“.div3”,为了观察效果,我们设置相同CSS高度、CSS宽度,边框分别设置第一个盒子边框为2px实线,第二个盒子边框为虚线4px,第三个盒子边框为实线8px。均为红色CSS边框。

1、完整HTML源代码如下:

    边框宽度 在线演示 www.创新互联.com    我被设置边框宽度2px实线边框
 我被设置边框宽度4px虚线边框
 我被设置边框宽度8px实线边框
  

以上代码设置三个不同宽度和不同样式边框的实例。

2、实例效果截图

DIV CSS边框宽度怎么设置
三个边框宽度不同、不同样式边框效果截图

到此,关于“DIV CSS边框宽度怎么设置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站标题:DIVCSS边框宽度怎么设置
分享路径:http://scyanting.com/article/psdioh.html

其他资讯