目錄
思路
box-shadow陰影實作的思路
::after定位僞類實作的思路
transform 縮放實作的思路
border-image: linear-gradient 邊框線性漸變的思路
答案
box-shadow陰影實作的答案
::after定位僞類實作的答案
transform 縮放實作的答案
border-image: linear-gradient 邊框線性漸變的答案
了解
box-shadow陰影實作的了解
::after定位僞類實作的了解
transform 縮放實作的了解
border-image: linear-gradient 邊框線性漸變的了解
總結
思路
首先 直接這樣設定
border: 0.5px solid red; 0.5px的邊框，肯定是不對的，邊框大小會向上取整。
box-shadow陰影實作的思路
既然border不能設定小數的邊框，那我們能不能找一個屬性有相似的效果來替代它呢，當然可以，我們可以用box-shadow屬性用陰影達到0.5px的邊框效果，box-shadow陰影屬性是允許小數值的，我們可以用它達到單條邊框和四條邊框。
::after定位僞類實作的思路
直接設定僞類元素，設定指定的高度，通過定位來控制位置。
transform 縮放實作的思路
我們可以設定任意大小的邊框，改變中心點，通過縮放效果（找好倍率）來達成想要的結果。
border-image: linear-gradient 邊框線性漸變的思路
同樣設定任意大小的邊框，通過漸變屬性改變一部分邊框的顔色效果，比如将一部分邊框融入背景，這樣就能得到想要的效果。
答案
box-shadow陰影實作的答案
<style>
div {
box-sizing: border-box;
background-color: blueviolet;
width: 200px;
height: 200px;
margin: 100px auto;
/* border: 1px solid red; */
box-shadow: 0px 0px 0px 0.5px green;
}
</style>
</head>
<body>
<div></div>
</body> ::after定位僞類實作的答案
<style>
div {
position: relative;
box-sizing: border-box;
background-color: blueviolet;
width: 200px;
height: 200px;
margin-top: 10px;
/* box-shadow: 0px 0px 0px 0.5px green; */
}
div::after {
position: absolute;
content: "";
background-color: red;
width: 100%;
height: 0.5px;
bottom: 0px;
}
</style>
</head>
<body>
<div></div>
</body> 
transform 縮放實作的答案
<style>
div {
position: relative;
box-sizing: border-box;
background-color: blueviolet;
width: 200px;
height: 200px;
margin-top: 10px;
/* box-shadow: 0px 0px 0px 0.5px green; */
}
div::after {
position: absolute;
content: "";
width: 200%;
height: 200%;
border: 1px solid red;
transform-origin: 0 0;
transform: scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body> 
border-image: linear-gradient 邊框線性漸變的答案
<style>
div {
position: relative;
box-sizing: border-box;
background-color: blueviolet;
width: 200px;
height: 200px;
margin-top: 10px;
/* box-shadow: 0px 0px 0px 0.5px green; */
}
div::after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 1px;
bottom: 0px;
background-color: red;
background: linear-gradient(to bottom, transparent 50%, red 50%);
}
</style>
</head>
<body>
<div></div>
</body> 了解
box-shadow陰影實作的了解
這種方法完全借助盒子陰影來達到指定效果，通過0.5px的陰影，讓它達到類似0.5px邊框的效果。
::after定位僞類實作的了解
這種方法直接設定0.5px的高度，高度同樣允許小數px，我們生成了一個新元素，來改變它的高度，讓它充當邊框。