CSS中设置border4条边框同等粗细,同等线条只有颜色不同代码写法优化

929 阅读1分钟

设置四条边框颜色代码优化前,从中我们可以发现border属性值前两个粗细线条都是一样的这样写起代码来费时间也站空间


border-top:1px solid red;
border-right:1px solid green;
border-bottom:1px solid yellow;
border-left:1px solid blue;

效果图:

avatar

代码优化简写:
border:1px solid;//四条边同等粗细和同等线条
border-color:red blue yellow green;//颜色值 上右下左依次对应

效果图:

avatar

可见以上实现效果都一样,代码简洁