css画下图

css画下图_第1张图片

通常我看到这种效果,都是直接ps解决,但是不断重申性能的今天,显然不适应时代的需求啊!

今天看到群里有人问这种效果怎么做了,我在思考的时候,有人已经给出答案了;

我就测试了一下,发现确实可以实现,总结了下,就记一下吧

    width: 104px;
    height: 26px;
    border-width: 11px;
    border-style: solid;
    border-color: yellow red;
    background-color: red;

上面的css直接放在一个div上就可以实现了,另外这个border-color的写法,按照老规矩是声明上右下左的做法,是上下为黄色,左右为红色。在border的宽度扩张的到一定程度就会呈现图片效果。

另外border的声明顺序有规则的,最好是像上述css分开来写,因为border连写的顺序会影响效果

你可能感兴趣的:(css画下图)