`
fanjf
  • 浏览: 330080 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

CSS border-top 属性

    博客分类:
  • CSS
 
阅读更多

定义和用法

border-top 简写属性把上边框的所有属性设置到一个声明中。

可以按顺序设置如下属性:

  • border-top-width
  • border-top-style
  • border-top-color

如果不设置其中的某个值,也不会出问题,比如 border-top:solid #ff0000; 也是允许的。

默认值: 继承性: 版本: JavaScript 语法:
not specified
no
CSS1
object.style.borderTop="3px solid blue"

 

 

实例

设置上边框的样式:

p
  {
  border-style:solid;
  border-top:thick double #ff0000;
  }

TIY

浏览器支持

所有浏览器都支持 border-top 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

值 描述
border-top-width 规定上边框的宽度。参阅:border-top-width 中可能的值。
border-top-style 规定上边框的样式。参阅:border-top-style 中可能的值。
border-top-color 规定上边框的颜色。参阅:border-top-color 中可能的值。
inherit 规定应该从父元素继承 border-top 属性的设置。

TIY 实例

所有上边框属性在一个声明之中
本例演示用简写属性来将所有上边框属性设置于同一声明之中。
分享到:
评论

相关推荐

    解决border-radius失效问题

    在CSS世界中,`border-radius`属性是一个非常重要的特性,它允许我们为元素添加圆角效果,从而使得设计更加精致和现代。然而,在实际开发中,我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期...

    css3(border-radius)边框圆角详解

    CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    圆角魅力:CSS border-radius全攻略

    本篇文章将详细介绍CSS中的`border-radius`属性,包括其基本概念、语法使用、高级技巧及其在实际项目中的应用案例,旨在为读者提供全面而深入的理解。 #### 一、`border-radius`属性简介 `border-radius`属性自CSS...

    css3教程应用css3 圆角border-radius属性制作...

    在CSS3中,`border-radius`属性是一个非常重要的特性,它允许我们为元素的边框创建圆角效果,使得设计更加美观和现代化。这个特性在网页设计中被广泛应用,可以替代传统的图片切角方法,提高网页加载速度并优化用户...

    给table的tr添加border-top时没有效果的解决方法

    然而,在实际操作中,有时你会发现为`<tr>`元素直接添加`border-top`属性并没有预期的效果,这通常是因为浏览器的默认样式与CSS的`border-collapse`属性有关。本文将详细解析这个问题,并提供解决方案。 当我们在...

    让IE6也识别CSS3-圆角效果应用border-radius

    在互联网技术日新月异的时代,CSS3的出现极大地丰富了网页设计的视觉表现力,其中,`border-radius`属性是实现圆角效果的关键。然而,对于那些仍在使用较旧浏览器,尤其是Internet Explorer 6(简称IE6)的用户来说...

    CSS border.docx CSS border.docx

    CSS border-style 属性详解 CSS 中的 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted...

    CSS3使用border-radius属性制作圆角

    本篇文章将深入探讨CSS3的border-radius属性,以及如何通过它来制作圆角效果。 首先,border-radius属性允许我们设置元素边框的四个角落的半径,从而创建圆形或椭圆形的角。它的语法结构如下: ```css border-...

    CSS 盒子模型.pdf

    border-color 属性用于设置边框的颜色,可以单独设置每个边框的颜色,也可以设置四个边框的统一颜色。 * border-top-color: 上边框颜色 * border-right-color: 右边框颜色 * border-bottom-color: 下边框颜色 * ...

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    尽管现代浏览器广泛支持CSS3的`border-radius`属性,但为了确保在较旧浏览器中的兼容性,可以使用渐进增强的方法,为不支持此属性的浏览器提供备选样式。 7. 示例代码: “practical-css3-tables-with-rounded-...

    如何使用CSS(14)-边框属性

    CSS中的边框属性主要包括以下几类:`border`, `border-width`, `border-style`, `border-color`以及针对四个不同方向的边框属性(例如:`border-top-width`, `border-bottom-style`等)。这些属性可以单独设置,也...

    XML应用开发(软件品牌)-1期 4.8 案例分析-使用CSS容器属性显示XML文档-边框属性border.doc

    本案例重点讨论了如何利用CSS的容器属性——边框属性`border`来显示XML文档,这有助于提升XML数据的可读性和视觉吸引力。以下是对这个知识点的详细解释: ### 边框属性 `border` 1. **边框样式 `border-style`** ...

    CSS border-width 属性使用教程

    在CSS(层叠样式表)中,`border-width`属性是一个非常重要的属性,它用于设置元素边框的宽度。此属性允许开发者精确控制元素外观,从而实现各种视觉效果。通过`border-width`,我们可以使边框更细、更粗或者完全...

    CSS应用---透明圆角

    如果要分别设置每个角的圆角大小,可以使用单独的属性,如`border-top-left-radius`、`border-top-right-radius`、`border-bottom-left-radius`和`border-bottom-right-radius`。 接下来,我们讨论透明度。在CSS中...

    使用CSS的border-radius属性 设置圆弧

    总结来说,CSS的`border-radius`属性是网页设计中实现圆角效果的重要工具,它可以创建圆形、椭圆形以及各种复杂形状的边框。熟练掌握这个属性,可以使你的页面设计更加丰富和精致。无论你是初学者还是经验丰富的...

    CSS3中border-radius属性设定圆角的使用技巧

    CSS3中的border-radius属性是一个强大的工具,用于为Web元素创建圆角效果。这个属性不仅可以实现简单的圆角矩形,还能创造出各种复杂的弧线边框图形。本文将详细介绍border-radius属性的使用技巧,帮助你更深入地...

    CSS 设置边框属性.docx

    可以通过指定`border-style`属性来设置所有边框的样式,或者使用如`border-top-style`、`border-right-style`、`border-bottom-style`和`border-left-style`来分别设置各个边的样式。 2. **border-width属性** `...

    表格边框的css语法.pdf

    border-top-width 属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个(thin、medium、thick),或者是一个长度值。初始值为 medium。 BORDER-TOP-WIDTH 属性用于指定一个元素上边框的宽度。值可以...

    border虚线样式,带颜色

    总之,“border虚线样式,带颜色”是指在网页设计中利用CSS的border-style和border-color属性来创建具有颜色的虚线边框。通过灵活运用这些属性,你可以创造出各种独特的视觉效果,丰富网页的界面设计。

Global site tag (gtag.js) - Google Analytics