如何创建非重复的外部边框图像?

艾米莉

我正在尝试找出如何在屏幕截图中为单独的div创建边框图像,但是我似乎找不到找到这种方法的方法。谁能提供一些有关如何使这些外部边界图像起作用的指导?

在此处输入图片说明

芜菁

这是我所能接近的。不需要图像:

.has_tab {
    border: 1px solid #e6e6e6;
    border-left: none;
    width: 33.33%;
    height: 300px;
    box-sizing: border-box;
    display: block;
    float: left;
    position: relative;
    text-align: center;
}

.has_tab:first-child {
    border-left: 1px solid #e6e6e6;
}

/* the important bit... */
.has_tab:after {
    content: "";
    display: block;
    width: 10px;
    height: 100px;
    background: #FFF;
    border: 1px solid #e6e6e6;
    border-left: none;
    border-radius: 0 20px 20px 0;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: -11px;
}

.has_tab:last-of-type:after {
    display: none;
}
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>

小提琴版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

边框图像未显示

来自分类Dev

带圆角的边框图像

来自分类Dev

边框底和边框图像问题

来自分类Dev

顶部和底部不同的边框图像

来自分类Dev

框模型外部的边框图像

来自分类Dev

如何将边框图像放入div

来自分类Dev

重叠边框图像

来自分类Dev

如何解决此CSS Bug边框图像?

来自分类Dev

如何使用此边框图像创建面板

来自分类Dev

是否可以设置具有重复线性渐变属性的边框图像和背景?

来自分类Dev

边框图像未显示在图像中

来自分类Dev

元素内部的边框图像(插图)

来自分类Dev

CSS边框图像重复无法正常工作

来自分类Dev

自定义tumblr标签可为边框颜色和边框图像创建主题选项

来自分类Dev

CSS“绝对”定位边框图像

来自分类Dev

边框底和边框图像问题

来自分类Dev

边框图像使我发疯

来自分类Dev

div标签的边框图像样式

来自分类Dev

顶部和底部不同的边框图像

来自分类Dev

div下方的位置边框图像

来自分类Dev

框模型外部的边框图像

来自分类Dev

如何在Google地图中的SVG闪烁矩形或圆形边框图像中包括标记

来自分类Dev

如何用边框图像装订图像?

来自分类Dev

用边框图像勾勒边框

来自分类Dev

更改 div 边框图像

来自分类Dev

边框图像重复不起作用

来自分类Dev

如何使用边框图像制作自定义 CSS 边框?

来自分类Dev

如何创建图像边框?

来自分类Dev

Python程序启动时如何显示无边框图像(透明)