按鈕缺口半圓的實現

利用浮動配合僞元素來實現,代碼如下

<!DOCTYPE">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta name="hsw">
  <style>
	#btn{
		border: 0;
		background-color: transparent;
		outline: none;
		/*去除button默認樣式*/
		display: block;
		width: 100px;
		height: 40px;
		background-color: black;
		text-align: center;
		line-height:36px;
		position: relative;
		color: #FFF;
		font-size: 1.6em;
		margin: 0 auto;
	}
	#btn::before{
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #fff;
		position: absolute;
		display: block;
		left: 88px;
		top: 10px;
	}
  </style>
 </head>

 <body>
   <button id="btn">button</button>
 </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章