揭秘CSS实用技巧总结( 四 ) _CSS

文章插图

条纹背景
也可以设置为垂直条纹背景：
background: linear-gradient(to right, #fb3 50%, #58a 0);background-size: 100% 30px;还可以设置为斜向条纹：

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;

文章插图

垂直条纹背景
斜向条纹需要设置四条条纹才能在平铺到时候做到无缝拼接。
更好的斜向条纹：(这里必须设置起始值#fb3 0)
background: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);

文章插图

更好的斜向条纹
网格

关键实现：background-image、background-size
给多个渐变设置不同的方向、大小，可以实现网格的效果。地址

background: #58a;background-image: linear-gradient(white 1px, transparent 0),                  linear-gradient(to right, white 1px, transparent 0);background-size: 30px 30px;

文章插图

网格
更好的网格：

background: #58a;background-image: linear-gradient(white 2px, transparent 0),                  linear-gradient(to right, white 2px, transparent 0),                  linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),                  linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 0);background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

文章插图

更好的网格
棋盘

关键实现：background-image、background-size、background-position
具体分析：给多个渐变设置不同的大小、位置，可以实现网格的效果。地址

  background: #eee;  background-image:    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);  background-size: 30px 30px;  background-position: 0 0, 15px 15px;

文章插图

棋盘
折角

关键实现：线性渐变
具体分析：150deg 是为了形成30度角，方便利用勾股定理测出各种长度，其他的靠你自己看了～地址

文章插图

折角
到这里 background 属性基本讲完了，光看无用，多动手实践吧。
波点

关键实现：径向渐变
具体分析：利用径向渐变实现一个个小圆点，按规律摆放即能生成波点地址

  background:    radial-gradient(tan 30%, transparent 0),    radial-gradient(tan 30%, transparent 0);  background-color: #666;  background-size: 30px 30px;  background-position: 0 0, 15px 15px;