草庐IT

CSS 边框

runoob 2023-04-05 原文

CSS 边框

CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

在四边都有边框


红色底部边框


圆角边框


左侧边框带宽度，颜色为蓝色

边框样式

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框


dotted: 定义一个点线边框


dashed: 定义一个虚线边框


solid: 定义实线边框


double: 定义两个边框。 两个边框的宽度和 border-width 的值相同


groove: 定义3D沟槽边框。效果取决于边框的颜色值


ridge: 定义3D脊边框。效果取决于边框的颜色值


inset:定义一个3D的嵌入边框。效果取决于边框的颜色值


outset: 定义一个3D突出边框。 效果取决于边框的颜色值


尝试一下 »

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

实例

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }

尝试一下 »

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

  • name - 指定颜色的名称，如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

实例

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

尝试一下 »

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

实例

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

尝试一下 »

上面的例子也可以设置一个单一属性：

实例

border-style:dotted solid;

尝试一下 »

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;
    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed

  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double

  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid

  • border-style:dotted;
    • 四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

边框-简写属性

上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在"border"属性中设置：

  • border-width
  • border-style (required)
  • border-color

实例

border:5px solid red;

尝试一下 »

更多实例

所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。

设置下边框的样式
本例演示如何设置下边框的样式。

设置左边框的宽度
本例演示如何设置左边框的宽度。

设置四个边框的颜色
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。

设置右边框的颜色
本例演示如何设置右边框的颜色。

CSS 边框属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-radius 设置圆角的边框。
CSS边框spanborderclass

有关CSS 边框的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  7. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  10. ruby-on-rails - 是否有一个库可以自动进行 CSS spriting？ - 2

    CSSSpriting确实可以提高性能，但它并不是最容易阅读和维护的东西。是否有任何工具可以让我单独对图像进行编码，然后将它们聚合起来并用正确的蒙太奇子集替换HTML？我特别考虑RubyonRails插件，但如果有其他语言的包，我很乐意移植它。 最佳答案 SmartSprites试一试。 关于ruby-on-rails-是否有一个库可以自动进行CSSspriting？，我们在StackOverflow上找到一个类似的问题： https://stackoverf

随机推荐