純CSS實現border的0.5px設置

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>一書一課App</title>
	<meta name="description" content="一書一課">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="Your title">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<style>
		.scale-border{
			height:100px;
			position:relative;
			width: 200px;
		}
		.border{
			-webkit-transform:scale(0.5);
			transform:scale(0.5);
			position:absolute;
			border:1px solid pink;
			top:-50%;
			right:-50%;
			bottom:-50%;
			left:-50%;
			border-radius: 10px;
			background-color:#eee;
		}
		.content{
			position:relative;
			z-index:2;
		}
	</style>

</head>

<body>
<div class="scale-border ">
	<div class="content">邊框寬度0.5px</div>
	<div class="border"></div>
</div>
</body>

</html>

 去掉: transform:scale(0.5) 後,相當於整體變成原來的2倍。

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