`
打了个D
  • 浏览: 74194 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CSS/XHTML边框样式的写法总结

    博客分类:
  • css
阅读更多

今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用:

border : border-width || border-style || border-color

border是一个复合的属性,它可以同时定义上右下左四个边框,当四个边都是同个样式时可以使用,如:

border:1px solid #FF00FF

 

这是最简单的应用,如果四个边的样式不是相同的怎办?一般会有下面几种情况,写法差不多:

/*边框样式、宽度、颜色都不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:2px solid #0000FF;
        border-bottom:1px double #FF00FF;
        border-left:1px solid #FF0000;
}
.div2{
         border-width:1px 2px 1px 1px;
         border-style:solid solid double solid;
         border-color:#FF00FF #0000FF #FF00FF #FF0000;
}


/*边框样式不同*/
.div1{
         border-top:1px solid #FF00FF;
         border-right:1px solid #FF00FF;
         border-bottom:1px double #FF00FF;
         border-left:1px solid #FF00FF;
}
.div2{
         border:1px #FF00FF;
         border-style:solid solid double solid;
}


/*边框宽度不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:2px solid #FF00FF;
        border-bottom:1px solid #FF00FF;
        border-left:1px solid #FF00FF;
}
.div2{
        border:solid #FF00FF;
        border-width:1px 2px 1px 1px;
}


/*边框颜色不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:1px solid #0000FF;
        border-bottom:1px solid #FF00FF;
        border-left:1px solid #FF0000;
}
.div2{
        border:1px solid;
        border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

 

还有就是有些边框是没有的,比如只有底边:

.div1{
/*错误的*/
        border:none;
        border-bottom:1px solid #FF00FF;
}
.div2{
/*正确的*/
        border:1px #FF00FF;
        border-style:none none solid;
}

 

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

 

  • 如果只提供一个,将用于全部的四条边。
  • 如果提供两个,第一个用于上-下,第二个用于左-右。
  • 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
分享到:
评论

相关推荐

    CSS tab选项卡写法

    ### CSS Tab 选项卡写法解析 #### 一、引言 在网页设计与开发过程中,选项卡(Tab)作为一种常见的交互元素,被广泛应用于各类网站及应用中。通过简单的CSS样式实现选项卡功能,不仅可以降低开发难度,还能够提高...

    CSS使用技巧的word文档

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的关键技术。本文档提供了几个实用的CSS使用技巧,帮助开发者更高效地控制页面样式。 1. 文字...

    CSS网站布局实录 (第二版)PDF版

    具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...

    用CSS和Div美化select样式的简单方法

    本文将介绍如何使用CSS和Div来优化SELECT样式,并提供兼容性写法,帮助开发者创建更美观且一致的界面。 首先,我们可以看到一个简单的例子,它使用Div包裹SELECT元素,通过CSS来调整样式。代码如下: ```css ....

    CSS全科教程(Word文档)

    - **边框样式**:如实线、虚线等。 - **边框颜色**:使用颜色值设置边框颜色。 **2.4 CSS外边距** - **外边距属性**:`margin`属性控制元素与其他元素之间的空间。 - **单边外边距**:同样可以设置四个方向的外边...

    Div+CSS布局入门教程

    总结来说,Div+CSS布局的关键在于使用元素作为页面结构的模块,通过CSS来控制这些模块的样式和位置。掌握这一技术,将使你能够创建更加灵活、可维护的网页设计。在实际项目中,不断实践和探索,结合实际需求,可以...

    DIV_CSS测试题

    4. **div的边距设置**:在CSS中,设置子`div`与父`div`的左边距应使用`margin-left`,但题目中的写法是错误的,正确的应该是`margin-left: 5px;`。 5. **IE6的div大小问题**:在IE6下,设置一个10px * 10px大小的`...

    cellpadding=0 cellspacing=0的css替代写法

    `并不能直接替代`cellpadding`和`cellspacing`的所有功能,它主要用于控制边框的外观,并不能直接控制内边距和间距,因此,完全替代`cellpadding`和`cellspacing`还需要结合其他CSS样式。 例如,要实现`cellpadding...

    浅谈浏览器兼容性模式[按F12便知]

    在怪异模式下,浏览器会使用非标准的解析规则,导致布局和样式表现与标准模式有很大差异,特别是在CSS的盒模型上,它通常采用IE的老式盒模型,其中元素宽度不包括边框和内边距。 DOCTYPE声明的写法直接影响到浏览器...

    CSS,JS的理论题

    - **解析**: “层叠式样式表”这个表述本身不准确,通常我们指的是“层叠”这一CSS的核心特性而不是一种样式表的形式。而其他三个选项均属于CSS样式表的不同形式。因此答案是 **C.层叠式样式表**。 14. **去掉...

    css 兼容性书写记录

    早期,开发者常用CSS hack来解决这些兼容性问题,CSS hack是一种利用CSS解析差异的特殊写法,目的是让特定浏览器识别并执行特定的CSS代码,而不影响其他浏览器。但是,这种方法虽然能快速解决问题,却增加了维护难度...

    javascript动态向网页中添加表格实现代码.docx

    - 另外,还可以进一步优化代码,如使用ES6的新特性简化写法。 #### 六、总结 通过上述步骤,我们可以利用JavaScript动态地向网页中添加表格。这种方法不仅能够提高页面的灵活性,还能够让开发者更方便地处理和展示...

    JavaScript内部测试-笔试试题和答案.doc

    XHTML 规定了所有元素必须闭合,包括 hr 元素,所以正确的写法是 <hr />。 4. 下面选项中,(AC)可以设置网页中某个标签的左外边距为 5 像素。margin 属性可以设置标签的外边距,margin:0 5px 0 0 设置左外边距为 ...

    前端工程师面试题汇总.docx编程资料

    双冒号是CSS3中的写法,单冒号是CSS2中的写法。 35. **修改Chrome记住密码后的自动填充背景** - 可以通过设置`-webkit-text-fill-color`属性来改变文本颜色,使其与背景色相同。 36. **`line-height`的理解** - ...

    HTML表格边框的控制实现代码

    实际上,我们可以将border-color替换为任何有效的CSS颜色值,来改变边框的颜色。 总的来说,控制HTML表格边框的关键在于理解border属性、cellspacing和cellpadding属性(尽管在本例中未提及,但它也影响表格的布局...

    仅限于自己用的web前端面试题

    根据提供的信息,我们可以总结出以下相关的前端知识点: ### 一、HTML5 笔试题 #### 1. 元素的 `alt` 和 `title` 的区别 - **选项A**:当图片无法显示时,`alt` 属性作为图片的替代文本出现;`title` 属性则提供...

Global site tag (gtag.js) - Google Analytics