css3实现条纹以及方格斜纹背景

【css3实现条纹以及方格斜纹背景】的更多相关文章

css3实现条纹以及方格斜纹背景

CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; /* 控制条纹的大小 */ -moz-box-shadow: 1px 1px 8px gray; -webkit-box-shadow: 1px 1px 8p…

css条纹背景样式、及方格斜纹背景的实现

一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条: background: linear-gradient(#fb3 %, #58a %); 接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状 backg…

css3实现条纹背景

<!DOCTYPE HTML><html><head><meta charset='utf-8'/><meta forua="true" http-equiv="Cache-Control" content="no-cache,must-revalidate,max-age=0, proxy-revalidate, s-maxage=0"/><meta name="vie…

纯css3棋盘图案背景以及45度斜纹背景

css代码 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; /* 控制条纹的大小 */ -moz-box-shadow: 1…

CSS3随内容自动伸缩的背景【转】

CSS3给我们带来一个非常实用的新属性:border-image,利用这个属性我们可以做出随着内容的增减自动伸缩的背景.废话不多说,看代码!HTML:<ol> <li>第一条列表内容</li> <li>第二条列表内容</li> <li>第三条列表内容</li> <li>第四条列表内容</li> <li>第五条列表内容</li> </ol>CSS:border: 2…

CSS3随内容自动伸缩的背景

CSS3给我们带来一个非常实用的新属性:border-image,利用这个属性我们可以做出随着内容的增减自动伸缩的背景.废话不多说,看代码! HTML: <ol> <li>第一条列表内容</li> <li>第二条列表内容</li> <li>第三条列表内容</li> <li>第四条列表内容</li> <li>第五条列表内容</li> </ol> CSS: borde…

CSS3动画设置后台登录页背景切换图片

CSS3的动画很实用很好用,简单几句话就可以做出一个好看而且过渡平滑的body背景图片,不多说,来来来,上代码 body{ animation:mybg 7s; -webkit-animation:mybg 7s; /* Safari and Chrome */ -moz-animation:mybg 7s; /* Safari and Chrome */ animation-iteration-count:infinite; } @keyframes mybg{ 0% {background:…