带按钮的 CSS 边框

Question

我可以在一端实现一个带有按钮的自定义 CSS 边框吗？没有 url(一些图片链接)？

注意:我想要这样是因为当我想改变颜色时，我必须操纵图像。

我使用图像实现了 JS Fiddle

#stretch {
    border-image: url(http://akitech.org/img/border.png) 30 30 stretch;
}

Answer 1

最简单的方法是使用 CSS 伪元素创建装饰(左边的圆圈)并遮盖边框右侧的倒 Angular (border-right 否则会见面):

div {
    border: 10px solid transparent;
    width: 250px;
    padding: 10px 20px;
    position: relative;
    /* this property has to be set to change the border-color: */
    border-bottom-color: #f90;
}

/* common shared styles: */
div::before,
div::after {
    /* to ensure the pseudo-elements are rendered: */
    content: '';
    /* for positioning: */
    position: absolute;
    /* positioning the element with its uppermost edge
       against the bottom of the element, against the
       upper side of the bottom-border: */
    top: 100%;
    /* again, set to change the color of the ends: */
    background-color: #f90;
}
div::before {
    /* position against the left edge: */
    left: 0;
    /* move the pseudo element 10px up, and
       10px left: */
    margin: -10px 0 0 -10px;
    height: 30px;
    width: 30px;
    /* making the pseudo-element a circle: */
    border-radius: 50%;
}
/* masking the chamfer of the border-bottom's
   right-most edge: */
div::after {
    left: 100%;
    /* making the height/width the same width
       as the border itself: */
    height: 10px;
    width: 10px;
}

div {
  border: 10px solid transparent;
  width: 250px;
  padding: 10px 20px;
  position: relative;
  border-bottom-color: #f90;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div id="stretch">Here, the image is stretched to fill the area.</div>

为了让这些边框适应文本的长度，您想要自定义边框的元素本身必须能够收缩到文本的宽度，或者使用 float :

div {
    border: 10px solid transparent;
    position: relative;
    border-bottom-color: #f90;
    padding-left: 20px;
    /* forces the element to take up only that space required by
       its (non-floated) contents: */
    float: left;
    /* forces the floated elements to the next line: */
    clear: left;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  float: left;
  clear: left;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>

或者，可能更简单，使用display: inline-block:

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline-block;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline-block;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>

或 display: inline(显然，这些不会自动在元素之间强制换行):

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>