实现一个0.5px边框

实现一个0.5px边框

<div class="container">
            <h3>方案：渐变</h3>
            <div class="border-gradient">
                原理：高度1px,背景渐变，一半有颜色，一半透明。
            </div>
        </div>
   <style type="text/css">
            .container{
                width: 500px;
                margin: 0px auto;
            }
            .border-gradient{
                position:relative;
                padding: 10px;
            }

            .border-gradient:after {
                content: " ";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
            }
        </style>