webapp中的CSS3實現 0.5px的細線

0.5px

微信圖片_20170823100948.jpg
div class="sf bt">
    1px 常規
</div>

<br />
<div class="btn">.5px border </div>
<style>
    
    .sf{border: 1px solid royalblue;}
    
     .btn,.bt {
        position: relative;
        width: 200px;
        height: 42px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 42px;
        background-color: #ededed;
      }
      .btn:before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: red;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
</style>
https://css-tricks.com/lozad-js-performant-lazy-loading-images/  懶加載
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容