今天在群(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 选项卡写法解析 #### 一、引言 在网页设计与开发过程中,选项卡(Tab)作为一种常见的交互元素,被广泛应用于各类网站及应用中。通过简单的CSS样式实现选项卡功能,不仅可以降低开发难度,还能够提高...
在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的关键技术。本文档提供了几个实用的CSS使用技巧,帮助开发者更高效地控制页面样式。 1. 文字...
具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...
本文将介绍如何使用CSS和Div来优化SELECT样式,并提供兼容性写法,帮助开发者创建更美观且一致的界面。 首先,我们可以看到一个简单的例子,它使用Div包裹SELECT元素,通过CSS来调整样式。代码如下: ```css ....
- **边框样式**:如实线、虚线等。 - **边框颜色**:使用颜色值设置边框颜色。 **2.4 CSS外边距** - **外边距属性**:`margin`属性控制元素与其他元素之间的空间。 - **单边外边距**:同样可以设置四个方向的外边...
总结来说,Div+CSS布局的关键在于使用元素作为页面结构的模块,通过CSS来控制这些模块的样式和位置。掌握这一技术,将使你能够创建更加灵活、可维护的网页设计。在实际项目中,不断实践和探索,结合实际需求,可以...
4. **div的边距设置**:在CSS中,设置子`div`与父`div`的左边距应使用`margin-left`,但题目中的写法是错误的,正确的应该是`margin-left: 5px;`。 5. **IE6的div大小问题**:在IE6下,设置一个10px * 10px大小的`...
`并不能直接替代`cellpadding`和`cellspacing`的所有功能,它主要用于控制边框的外观,并不能直接控制内边距和间距,因此,完全替代`cellpadding`和`cellspacing`还需要结合其他CSS样式。 例如,要实现`cellpadding...
在怪异模式下,浏览器会使用非标准的解析规则,导致布局和样式表现与标准模式有很大差异,特别是在CSS的盒模型上,它通常采用IE的老式盒模型,其中元素宽度不包括边框和内边距。 DOCTYPE声明的写法直接影响到浏览器...
- **解析**: “层叠式样式表”这个表述本身不准确,通常我们指的是“层叠”这一CSS的核心特性而不是一种样式表的形式。而其他三个选项均属于CSS样式表的不同形式。因此答案是 **C.层叠式样式表**。 14. **去掉...
早期,开发者常用CSS hack来解决这些兼容性问题,CSS hack是一种利用CSS解析差异的特殊写法,目的是让特定浏览器识别并执行特定的CSS代码,而不影响其他浏览器。但是,这种方法虽然能快速解决问题,却增加了维护难度...
- 另外,还可以进一步优化代码,如使用ES6的新特性简化写法。 #### 六、总结 通过上述步骤,我们可以利用JavaScript动态地向网页中添加表格。这种方法不仅能够提高页面的灵活性,还能够让开发者更方便地处理和展示...
XHTML 规定了所有元素必须闭合,包括 hr 元素,所以正确的写法是 <hr />。 4. 下面选项中,(AC)可以设置网页中某个标签的左外边距为 5 像素。margin 属性可以设置标签的外边距,margin:0 5px 0 0 设置左外边距为 ...
双冒号是CSS3中的写法,单冒号是CSS2中的写法。 35. **修改Chrome记住密码后的自动填充背景** - 可以通过设置`-webkit-text-fill-color`属性来改变文本颜色,使其与背景色相同。 36. **`line-height`的理解** - ...
实际上,我们可以将border-color替换为任何有效的CSS颜色值,来改变边框的颜色。 总的来说,控制HTML表格边框的关键在于理解border属性、cellspacing和cellpadding属性(尽管在本例中未提及,但它也影响表格的布局...
根据提供的信息,我们可以总结出以下相关的前端知识点: ### 一、HTML5 笔试题 #### 1. 元素的 `alt` 和 `title` 的区别 - **选项A**:当图片无法显示时,`alt` 属性作为图片的替代文本出现;`title` 属性则提供...