如何为div

Question

我一直致力于一个项目，我必须设计一个div的边框，以实现这个我只能使用css和js我不能使用任何插件。 我在堆栈上经历了几个在线帖子和类似的问题，但无法真正找到我想要的内容，我附加作为参考，以及我迄今为止尝试过的fiddle。 / p>

＆＃13;

＆＃13;

.outer {
  overflow: hidden;
}
.inner {
  border: 1px solid #888;
}
.inner i {
  width: 40px;
  height: 40px;
  border: 1px solid #888;
  border-radius: 50%;
  background-color: #fff;
}
.inner .top {
  margin-top: -20px;
}
.inner .bottom {
  margin-top: -20px;
  margin-bottom: -22px;
}
.inner .left {
  float: left;
  margin-left: -20px;
}
.inner .right {
  float: right;
  margin-right: -20px;
}
.content {
  min-height: 80px;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <i class="top left"></i>
    <i class="top right"></i>
    <div class="content"></div>
    <i class="bottom right"></i>
    <i class="bottom left"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信这会对你有所帮助

演示：http://jsfiddle.net/mxehp3sh/2/

HTML

   <div id="a" class="circle-border">B</div>

CSS

    body{background:yellow;}
  .circle-border {margin:10px;
  display: inline-block;    
position: relative;    
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
 }

 #a {
width: 90%;
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
background-image: -moz-radial-gradient(
    100% 50%,
    circle closest-corner, 
    transparent 0,
    transparent 55px, 
    transparent  56px, 
    grey 57px 
);
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -ms-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -o-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
}