[分享]css八仙过海代码

CSS编程中，有一种叫做“八仙过海”的技巧。所谓八仙过海，就是利用CSS常用的8个属性：margin、padding、border、background、width、height、line-height、font-size，让元素组成一个图形或形状。

.box{
    width: 0;
    height: 0;
    border-top: 30px solid red;
    border-right: 50px solid transparent;
    border-bottom: 30px solid red;
    border-left: 50px solid transparent;
} 

上述代码就是八仙过海技巧的一种应用，它可以将一个空元素设置为三角形，而不需要额外添加图片。其中，width和height属性设置元素宽高为0；border-top、border-right、border-bottom、border-left分别设置上、右、下、左四个边框的样式；通过这些属性的设置，就可以将一个空元素变成一个三角形。

除了上面的八仙过海技巧之外，还有很多其他的应用场景。比如，可以利用padding、background和border属性创建复杂的图案；利用line-height和font-size属性实现垂直居中等。

.box{
    width: 100px;
    height: 100px;
    padding: 30px;
    background: linear-gradient(to bottom, red, yellow);
    border-radius: 50%;
} 

上述代码就是利用padding、background和border-radius属性创建的一个圆形元素。其中，padding属性设置内边距为30px；background属性设置为红黄渐变色；border-radius属性设置为50%，即把元素变成一个圆形。

当然，在实际应用中，八仙过海技巧只是我们工具箱中的一种工具，不是所有场景都适用。在选择合适的Css代码时，需要根据实际的需求来决定使用哪些属性，以达到最佳的效果。