程序员

CSS条纹背景,点阵背景,圆点背景。

1、背景图片

废话不多说,上代码:

效果图如下:

背景位置

投影:
box-shadow: X坐标/ Y坐标/ 模糊/ 扩展/ 颜色/ 内阴影
背景初始位置:
background-origin:border-box content-box padding-box(默认);
背景裁剪:
background-clip:border-box(默认) content-box padding-box;

2、条纹效果 -> 线性渐变

条纹一

3、条纹效果 -> 线性渐变

条纹二

4、条纹效果 -> 同色系

同色系

5、条纹效果 -> 交错斜纹

斜纹

6、条纹效果 -> 辅助线(简单)

辅助线1

7、条纹效果 -> 辅助线(逼真)

辅助线2

8、点阵图

点阵

9、圆点

圆点

10、条纹效果 -> 棋盘

棋盘

11、点阵图<

div id="div12">

棋盘

12、条纹效果 -> 随机纹理

随机条纹

备注:这里的大多数例子,都是从LEA VEROU的《css揭秘》这本书上借鉴来的,感兴趣的童鞋不如去买这本书,简直是CSS神书,就和Js的蝴蝶一样,前段必备。