html - 如何通过 css 或 css3 在一个 div 标签上做两个边框?

标签 html css

<分区>

我正在为我的客户开发一个 html/css 模板。这里有一个 post div,它的类名是:single_post_box。 在这个 div 上,slyle 如下所示:

single_post_box{
border: 1px solid #eaeaea;
}

现在我的客户想要,会有两个边框。第一个边框颜色为:#eaeaea,第二个边框颜色为:#dddddd。 我该怎么做。

最佳答案

你可以使用伪元素来做到这一点

.double {
    background-color: #ccc;
    border: 4px solid #fff;
    padding: 20px;
    width: 200px;
    height: 300px;
    position: relative;
}
.double:before {
    background: none;
    border: 4px solid #666;
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
}

你可以查看这个答案CSS: Double border with different color

关于html - 如何通过 css 或 css3 在一个 div 标签上做两个边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26815138/

上一篇:html - 具有类的 <a> 元素不采用其类 CSS 属性

下一篇:jquery 切换 div 位置的 css

相关文章:

javascript - jQuery - 通过 "style"属性中的自定义 CSS 键查找元素的最佳方式

css - Bootstrap 响应式导航栏在较低的 View 比率下出现奇怪的格式

javascript - 下拉列表和 IE8 的奇怪行为

css - 如何不重复 CSS 背景渐变

php - 动态更改表格中的行字体颜色

javascript - 选中和取消选中复选框

javascript - 在文本框中动态显示数据库数据

css - 如何使导航栏永久位于顶部?

html - 在 Firefox 上提供与 Safari 相同的宽度

javascript - 使用 jquery 将 javascript 添加到 html 页面中