与CSS3的花梢边界

Question

我想用CSS创建这样的东西，有可能吗？

Answer 1

＆＃13;

＆＃13;

div {
  height: 50px;
  width: 200px;
  background: #006B96;
  box-shadow: 0px 0px 0px 4px #006B96;
  border: 4px solid #fff;
  margin: 0 auto;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

div{
	height:50px;
	width:200px;
	background:#006B96;
	box-shadow:0px 0px 0px 4px #006B96;
	border:4px solid #fff;
	margin:0 auto;
	}

<div>
</div>

Answer 3

span {
    display:inline-block;
    padding:5px;
    box-shadow:
        0px 0px 0px 5px #000,
        0px 0px 0px 10px #fff,
        0px 0px 0px 15px #000;
}

http://jsfiddle.net/gwhq3uk6/

Answer 4

尝试使用Bootstrap，您将不再需要担心设计按钮，因为无需编写任何代码即可轻松获取所需的所有按钮和其他内容。