水平条纹: <div id="div1"> </div> linear-gradient属性 #div1{ width: 100px; height: 100px;background:linear-gradient(yellow 25%,red 25%);background:linear-gradient(yellow 25%,red 50%);模糊条纹边界background:linear-gradient(90deg , yellow 25%,red 5…

灵活的背景定位 实现效果: 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置. background-position 方案 实现代码: <div>海盗密码</div> div { /* 关键样式 */ background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a; background-position: right 20px bottom 10p…

灵活的背景定位 实现效果: 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置. background-position 方案 代码: <div>海盗密码</div> div { /* 关键样式 */ background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a; background-position: right 20px bottom 10px;…

一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; height: 150px; margin: 50px; background: linear-gradient(#fb3 50%,#58a 50%); background-size: 100% 30px; } 效果图 2. 不等宽的条纹背景 css .stripe{ width: 250px; height:…

本文摘自<CSS揭秘>中国工信出版集团 难题: 不论是在网页设计中,还是在其他传统媒介中(比如杂志和墙纸等),各种尺寸.颜色.角度的条纹图案在视觉设计中无处不在.要想在网页中实现条纹图案,其过程还远远不够理想.通常,我们的方法是创建一个单独的位图文件,然后每次需要做些调整时,都用图像编辑器来修改它.可能有人试过用SVG 来取代位图,但这样还是会有一个独立的文件,而且它的语法也远远不够友好.如果可以直接在CSS 中创建条纹图案,那该有多棒啊!你可能会惊讶地发现,我们居然真的可以. 解决方法: 假…

先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear-gradient(to  <side-or-corner>)||<angle>,<color-stop>,<color-stop>) <side-or-corner> = [left | right] || [top | bottom] 用角度值指…

1.不等垂直条纹. <!-- 不等垂直条纹 --> <div class="div1"></div>div1 div{ width: 200px; height: 200px; } .div1{ background: linear-gradient(#ff0 30%, #f00 30%); background-size: 100% 30; } 2.垂直条纹渐变 .div5{ background: linear-gradient(#ff0 30%…

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

php中的转义字符(用反斜杠\来输出,和C语言一样) 一.总结 1.引号中的变量:双引号会替换变量的值,而单引号会把它当做字符串输出. 2.引号中的转义字符:双引号将用变量的值(test)代替它的名称($var),并用特殊字符表示的值($)代替它的代码(\$).单引号总是准确地打印你输入的内容,除了转义的单引号(\')和转义的反斜杠(\\)之外,它们将分别被打印为一个单引号和一个反斜杠. 二.php中的单引号.双引号和转义字符详解 PHP单引号及双引号均可以修饰字符串类型的数据,如果修饰的字符串…

前面的话 本文将详细介绍CSS背景效果 条纹背景 [双条纹背景] background:linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; CSS标准规定:如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小,则该色标的位置值会被设置为它前面所有色标位置值的最大值 因此,第二个色标值可以设置为0 background:linear-gradient(#fb3 50%, #58a 0); background-s…