Gather ye rosebuds while ye may

手写Border

2016-04-17 前端

HTML
CSS
效果对比

看了一个题，叫使用纯CSS+HTML方式实现圆角框。
想看题的点这里。
题下面有答案，答案说直接margin就可以实现了，我研究了一下代码并没有看懂。
题目说是五条线设置不同外边距为5、3、2、1、1即可，但是下面给的答案却有八个不同的div，我并不知道是上下分开设置了还是一个角落就有八个div。
然后按照他的逻辑写了一下，但是没有搞成功，先挖个坑在这里，下面贴我成功的代码。

HTML

简单逻辑就是b1外边距负得多，里面的外边距负的少。
几个div嵌套起来，分别设置左右边距。

<div class="b1">
    <div class="b2">
        <div class="b3">
            <div class="b4">
                <div class="b5">
                    <div class="b6">
                        <div class="content">
                            hello world!
                            <br> gaoryrt
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这个用emmet写出来特别简单：.b1>.b2>.b3>.b4>.b5>.b6>.content, 好像子元素不能用$来迭代吧。

CSS

.b1, .b2, .b3, .b4, .b5, .b6 {
        font-size: 8px;
        background: #F0F8FF;
        color: #F0F8FF;
    }
    .b1:after, .b2:after, .b3:after, .b4:after, .b5:after, .b6:after, .b1:before, .b2:before, .b3:before, .b4:before, .b5:before {
        content: ".";
        color: #F0F8FF;
    }
    .b1, .b1:after, .b1:before {
        color: #98C2F0;
    }
    .b1 {
        margin: 0 -50px;
        background: #98C2F0;
    }
    .b2 {
        margin: 0 -20px;
        border-left: 20px solid #98C2F0;
        border-right: 20px solid #98C2F0;
    }
    .b3 {
        margin: 0 -30px;
        border-left: 10px solid #98C2F0;
        border-right: 10px solid #98C2F0;
    }
    .b4 {
        margin: 0 -20px;
        border-left: 10px solid #98C2F0;
        border-right: 10px solid #98C2F0;
    }
    .b6 {
        margin: 0 -20px;
        border-left: 10px solid #98C2F0;
        border-right: 10px solid #98C2F0;
        display: flex;
        justify-content: center;
    }
    .content {
        padding: 0 50px;
        font-size: 5em;
        color: black;
    }

这个是纯css，要是用sass肯定更简单。
个人项目一是量少，二是懒，一般都不怎么用sass这种css generator。
惨了惨了，不会写了。

效果对比

题目要求：

我的效果：

要是有更简单的方法还劳烦提醒一下。
以上。