CSS 實現好看的邊框

本文轉載自查看原文 2017-07-02 11:11 2106 CSS/ 前端/ html

設計給這樣的稿子不是折騰人嘛...哎，沒辦法，作為一個負責任的打工仔，我是不會簡單粗暴的直接切圖的。嗯。能用CSS畫邊框，就不用圖片。

    <style>
        *{ /*實際開發中，別這樣偷懶哦*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 320px;
            height: 100px;
            border-bottom: 2px solid #4c4c4c;
            border-top: 3px solid #00b9b7;
            display: flex;
            align-items: center;
            margin: 20px auto;
            justify-content: space-between;
        }
        .box div{

        }
        span{
            display: block;
        }
        .left_top{
            flex: 1.5;
            border-left: 2px solid #00b9b7;
            height: 66px;
            margin-bottom: 1px;
        }
        .left_bottom{
            flex: 1;
            border-left: 2px solid #4c4c4c;
            height: 33px;
        }
        .txt{
            width: 292px;
        }
        .right_top{
            flex: 1;
            border-left: 2px solid #00b9b7;
            height: 33px;
            margin-bottom: 1px;
        }
        .right_bottom{
            flex: 1.5;
            border-left: 2px solid #4c4c4c;
            height: 66px;
        }

    </style>

</head>
<body>
<div class="box">
    <div class="box_left">
        <span class="left_top"></span>
        <span class="left_bottom"></span>
    </div>
    <div class="txt">隨便一段文字</div>
    <div class="box_right">
        <span class="right_top"></span>
        <span class="right_bottom"></span>
    </div>
</div>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3實現好看的邊框效果 CSS - 實現熒光邊框 css實現動態邊框 css實現細邊框 css實現圖像邊框的樣式用純css實現雙邊框效果 HTML CSS邊框陰影的實現 css實現中括號邊框 css實現連續的圖像邊框 css3實現邊框凹陷