通常我看到这种效果,都是直接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连写的顺序会影响效果