CSS 实现好看的边框

时间：2017-07-02 11:36:59 阅读：379 评论：0 收藏：0 [点我收藏+]

技术分享

设计给这样的稿子不是折腾人嘛...哎，没办法，作为一个负责任的打工仔，我是不会简单粗暴的直接切图的。嗯。能用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>

CSS 实现好看的边框

标签：head 开发 20px enter 一个分享 nbsp ima 简单

原文地址：http://www.cnblogs.com/dodocie/p/7101631.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行