css - 如何在CSS中制作双线边框,每条线颜色不同,不使用背景图片?

标签 css

如何在不使用 background-image 的情况下在 CSS 中制作双线边框,每条线颜色不同?

例如像这样:

enter image description here

代码:

<h2> heading 2 </h2>
<p> paragraph text </p>

<h2> heading 2 </h2>
<p> paragraph text </p>

注意:我不考虑 IE 8、7、6

最佳答案

我刚刚在谷歌搜索中找到了方法,它对我很有用。

h2 {
    border-bottom: 1px solid blue;
    box-shadow: 0 1px 0 red;}

来源:http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

编辑:我找到了另一种使用 CSS 2.1 伪元素实现多边框的方法

支持:Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10+、IE8+

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

关于css - 如何在CSS中制作双线边框,每条线颜色不同,不使用背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5753351/

相关文章:

internet-explorer - 如何将其转换为 IE 的类似文本阴影?

html - Bootstrap 按钮定位

javascript - 时间 div 是在具有相同类 jQuery 的多个 div 中创建的

css - overflow-x 没有按预期工作

css - 菜单和下拉菜单之间的空间

css - 使边框高度相对于父高度

html - 顶部导航栏中元素的高度随着 Logo 高度的增加而增加

html - 在 css 中集成悬停的正确方法

javascript - 一页上的多个选项卡式区域(纯 Javascript)

html - 在 jekyll 站点中预览博客文章