.view2{
box-shadow: 0px 0px 50px 10px #DDDDDD;
}
语法：box-shadow: h-shadow v-shadow blur spread color inset;
前四个按照位置来决定值各自代表的含义。后两个就可以直接写，因为太过明显，浏览器可以识别。h-shadow：必需。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。blur：可选。模糊距离。spread：可选。阴影的尺寸。color：可选。阴影的颜色。inset：可选。将外部阴影 (outset) 改为内部阴影。默认的是外部阴影。所以如果是outset那么就可以直接省略。如果是内阴影再写上inset.
第二种写法：
box-shadow:0px 8px 32px rgba(0,0,0,.1)
1：window.location.href的用法：
2: window.open()的用法
3： window.open和window.location.href的区别
1）区别
2）window.open不一定是打开一个新窗口!!!!!!!!
3）关于重新定位
4）在框架内指定页面打开连接
5）是否打开其他网站地址
6）window.open()经过设置后的弹出窗口
7）用函数控制弹出窗口:
8）同时弹出两个窗口
9）【弹出的窗口之定时关闭控制】
10）【在弹出窗口中加上一个关闭按钮】
11）打开新页面
self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 location.href;// 当前页面打开URL页面 parent.location.href;//在父页面打开新页面 top.location.href;//在顶层页面打开新页面 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)
| 参数 | 说明 |
|---|---|
| URL | 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口 |
| name | 可选。指定target属性或窗口的名称。支持以下值：_blank – URL加载到一个新的窗口。这是默认_parent – URL加载到父框架_self – URL替换当前页面_top – URL替换任何可加载的框架集name – 窗口名称 |
| specs | 可选。一个逗号分隔的项目列表。支持以下值： channelmode=yes|no|1|0是否要在影院模式显示 window。默认是没有的。仅限IE浏览器directories=yes|no|1|0是否添加目录按钮。默认是肯定的。仅限IE浏览器fullscreen=yes|no|1|0浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器height=pixels窗口的高度。最小.值为100left=pixels该窗口的左侧位置location=yes|no|1|0是否显示地址字段.默认值是yesmenubar=yes|no|1|0是否显示菜单栏.默认值是yesresizable=yes|no|1|0是否可调整窗口大小.默认值是yesscrollbars=yes|no|1|0是否显示滚动条.默认值是yesstatus=yes|no|1|0是否要添加一个状态栏.默认值是yestitlebar=yes|no|1|0是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yestoolbar=yes|no|1|0是否显示浏览器工具栏.默认值是yestop=pixels窗口顶部的位置.仅限IE浏览器width=pixels窗口的宽度.最小.值为100 |
| replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true – URL 替换浏览历史中的当前条目。false – URL 在浏览历史中创建新的条目。 |
window.location是window对象的属性，而window.open是window对象的方法
window.location是你对当前浏览器窗口的URL地址对象的参考！
window.open是用来打开一个新窗口的函数！
只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换，用这个特性的话可以在iframe和frame中来代替location.href。
如<iframe name=”aa”></iframe>
<input type=button οnclick=”window.open(‘1.htm’,’aa’,”)”>和
<input type=button
οnclick=”self.frames[‘aa’].location.href=’1.htm'”>的效果一样
在给按钮、表格、单元格、下拉列表和DIV等做链接时一般都要用Javascript来完成，和做普通链接一样，可能我们需要让链接页面在当前窗口打开，也可能需要在新窗口打开，这时我们就可以使用下面两项之一来完成：
window.open 用来打开新窗口
window.location 用来替换当前页，也就是重新定位当前页
可以用以下来个实例来测试一下。
<input type=”button” value=”新窗口打开” οnclick=”window.open(‘http://www.google.com’)”>
<input type=”button” value=”当前页打开” οnclick=”window.location=’http://www.google.com/'”>
window.location或window.open如何指定target?
这是一个经常遇到的问题，特别是在用frame框架的时候
解决办法:
window.location 改为 top.location 即可在顶部链接到指定页
或
window.open(“你的网址”,”_top”);
window.open()是可以在一个网站上打开另外的一个网站的地址
而window.location()是只能在一个网站中打开本网站的网页
window.open()详解
<script type=”text/javascript”>
<!– window.open (‘page.html’); –>
</script>
因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE=”javascript”>标签和</script>之间。<!– 和 –>是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。
要养成这个好习惯啊。
window.open (‘page.html’) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE=”javascript”>
<!–
window.open (‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no’) //这句要写成一行
–>
</SCRIPT>
参数解释：
window.open 弹出新窗口的命令；
’page.html’ 弹出窗口的文件名；
’newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT>
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE=”JavaScript”>
<!–
function openwin() {
window.open (“page.html”, “newwindow”, “height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”) //写成一行
}
//–>
</script>
</head>
<body οnlοad=”openwin()”>
任意的页面内容…
</body>
< ml>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？
方法一：<body οnlοad=”openwin()”> 浏览器读页面时弹出窗口；
方法二：<body οnunlοad=”openwin()”> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href=”#” οnclick=”openwin()”>打开一个窗口</a>
注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
<input type=”button” οnclick=”openwin()” value=”打开窗口”>
对源代码稍微改动一下：
<script LANGUAGE=”JavaScript”>
<!–
function openwin() {
window.open (“page.html”, “newwindow”, “height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no”)//写成一行
window.open (“page2.html”, “newwindow2”, “height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no”)//写成一行
}
//–>
</script>
为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。
【主窗口打开文件1.htm，同时弹出小窗口page.html】
如下代码加入主窗口<head>区：
<script language=”javascript”>
<!–
function openwin() {
window.open(“page.html”,””,”width=200,height=200″)
}
//–>
</script>
加入<body>区：
<a href=”1.htm” οnclick=”openwin()”>open</a>即可。
下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，可不是主页面中，否则 …)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的<head>区：
<script language=”JavaScript”>
function closeit()
{
setTimeout(“self.close()”,10000) //毫秒
}
</script>
然后，再用<body οnlοad=”closeit()”> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗 口的代码，10秒钟后就自行关闭该窗口。)
<FORM>
<INPUT TYPE=’BUTTON’ VALUE=’关闭’ onClick=’window.close()’>
</FORM>
呵呵，现在更加完美了！
然后，用<body οnlοad=”loadpopup()”>（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进 入该页面，窗口再也不会弹出了。
用window.open()打开新页面
但是用window.location.href＝”” 却是在原窗口打开的.
有时浏览器会一些安全设置window.open肯定被屏蔽。例如避免弹出广告窗口。
原文：https://blog.csdn.net/qq_41694906/article/details/88224861
CSS 渐变 <image> 类型的一种特殊类型 <gradient> 表示，由两种或多种颜色之间的渐进过渡组成。您可以选择三种类型的渐变：线性 (由 linear-gradient 函数创建)，径向(由 radial-gradient() 函数创建) 和圆锥 (由 conic-gradient 函数创建)。您还可以使用 repeating-linear-gradient 和 repeating-radial-gradient 函数创建重复渐变。
渐变可以在任何使用 <image> 的地方使用，例如在背景中。 由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。
我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。
线性渐变创建了一条沿直线前进的颜色带。
要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。
.simple-linear {
background: linear-gradient(blue, pink);
}默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。
.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}
你甚至可以设置渐变方向为从一个对角到另一个对角。
.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}
如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。
.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}
在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
所有的CSS渐变类型都是一个位置依赖的颜色范围。CSS渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：
无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。
.auto-spaced-linear-gradient {
background: linear-gradient(red, yellow, blue, orange);
}
你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。
.multicolor-linear {
background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在50%标记处共享一个颜色停止点，即渐变的一半：
.striped {
background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。
.color-hint {
background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
background: linear-gradient(blue, pink);
}要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。
.multiposition-stops {
background: linear-gradient(to left,
lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
background: linear-gradient(to left,
lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}
.multiposition-stop2 {
background: linear-gradient(to left,
lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
background: linear-gradient(to left,
lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}
In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.
In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.
In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.
By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:
.colorhint-gradient {
background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
background: linear-gradient(to top, black, cyan);
}
Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.
.layered-image {
background: linear-gradient(to right, transparent, mistyrose),
url("https://mdn.mozillademos.org/files/15525/critters.png");
}
You can even stack gradients with other gradients. As long as the top gradients aren’t entirely opaque, the gradients below will still be visible.
.stacked-linear {
background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.
As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it’s box:
.simple-radial {
background: radial-gradient(red, blue);
}
Again like linear gradients, you can position each radial color stop with a percentage or absolute length.
.radial-gradient {
background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}
You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.
.radial-gradient {
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}
Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.
This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.
.radial-ellipse-side {
background: radial-gradient(ellipse closest-side,
red, yellow 10%, #1e90ff 50%, beige);
}
This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.
.radial-ellipse-far {
background: radial-gradient(ellipse farthest-corner at 90% 90%,
red, yellow 10%, #1e90ff 50%, beige);
}
This example uses closest-side, which makes the circle’s size to be the distance between the starting point (the center) and the closest side. The circle’s radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.
.radial-circle-close {
background: radial-gradient(circle closest-side at 25% 75%,
red, yellow 10%, #1e90ff 50%, beige);
}
Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.
.stacked-radial {
background:
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5),
rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5),
rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5),
rgba(0,255,0,0) 70.71%) beige;
border-radius: 50%;
}
The linear-gradient and radial-gradient() properties don’t support automatically repeated color stops. However, the repeating-linear-gradient and repeating-radial-gradient properties are available to offer this functionality.
The size of the gradient line that repeats is the length between the first color stop value and the last color stop length value. If the last color stop has just a color and no color stop length, the value defaults to 0, meaning the linear gradient will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner.
This example uses repeating-linear-gradient to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.
.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}
Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.
In this case the gradient lines are 300px, 230px, and 300px long.
.multi-repeating-linear {
background:
repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px),
repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px),
repeating-linear-gradient(23deg, red 50px, orange 100px,
yellow 150px, green 200px, blue 250px,
indigo 300px, violet 350px, red 370px);
}
To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:
.plaid-gradient {
background:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
background:
repeating-linear-gradient(90deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px);
}
This example uses repeating-radial-gradient to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.
.repeating-radial {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
.multi-target {
background:
repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
rgba(255,255,255,0.5) 30px) top left no-repeat,
repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
background-size: 200px 200px, 150px 150px;
}
To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:
<div class="plaid-gradient"></div>div {
width: 200px;
height: 200px;
}.plaid-gradient {
background:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
background:
repeating-linear-gradient(90deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px);
}
原文：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
参考：css3背景颜色渐变属性
当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。
这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。
如果要设置页面背景颜色，得在 wxss 中自定义样式，如下：
page {
background-color: #eee;
}
常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。
因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。
一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？
还有两种情况你应该去了解（如果你不知道的话）：
第一，对inline元素设置float
还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。
第二，对inline元素设置position:absolute/fixed
还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。
本系列有一节重点讲解了《盒子模型》，不知道大家看没看过，或者说你已经很了解盒子模型了。
其实对于block，我觉得就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。因此，这里也不再去详细写它了，大家可以去盒子模型那一节好好看看，就那么点内容。
这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下。
初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。
那button举例子。我们在页面中输入若干个<button>，发现它们是“流”式排列的（可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。
因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。不知道大家理解也无？
1.解释一下display的几个常用的属性值，inline ， block， inline-block
图一:
图二：
两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。
2.inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
b.相同之处：能在某程度上达到一样的效果
我们先来看看这两种布局：
图一：display：inline-block
图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：
>>乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）
c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三： 
图四： 
>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。
3.inline-block存在的小问题：
a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
b.去除空隙的方法：
1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
图一：
c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
在ie6/7下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}
4.总结:
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
主要利用了label标签和input type=’checkbox’标签
预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>开关切换</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3 {
margin: 10px 0 10px 0;
font-size: 20px;
}
body {
padding: 10px;
font-size: 12px;
}
.example-con {
margin-top: 30px;
}
.mui-switch-con {
margin-top: 10px;
font-size: 16px;
}
.mui-switch-con label {
display: block
}
.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
}
.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
}
.mui-switch:checked:before {
left: 21px;
}
.mui-switch.mui-switch-animbg {
transition: background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #64bd63;
transition: border-color 0.4s, background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:checked:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.mui-switch.mui-switch-anim:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.mui-switch.mui-switch-anim:checked:before {
transition: left 0.3s;
}
</style>
</head>
<body>
<div class="example-con">
<h3>默认</h3>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
</pre>
</div>
<div class="example-con">
<h3>简单的背景过渡效果 switch</h3>
<p>加 mui-switch-animbg 类即可</p>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
</pre>
</div>
<div class="example-con">
<h3>过渡效果的switch</h3>
<p>加 mui-switch-anim 类即可</p>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
</pre>
</div>
</body>
</html>使用：
<input class="switch switch-animbg" value="2" style="outline: medium;margin-bottom: -10px;" name="switch-alarm" onclick="switchAlarm()" type="checkbox" >JS控制代码： // 这里只能用prop去控制和判断 不能用attr
function switchAlarm() {
console.log($('.switch').attr('value')) // 2 1 2 1 .....
if($('.switch').attr('value') === '2'){
$('.switch').prop('checked',false)
//操作 .......
//成功以后
$('.switch').prop('checked',true)
$('.switch').attr('value',1)
}else {
$('.switch').prop('checked',true)
//操作 .......
//成功以后
$('.switch').prop('checked',false)
$('.switch').attr('value',2)
}
}1.取整 //保留整数部分 parseInt(3/2) // 1 2.向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(3/2) // 2 3.四舍五入 // 四舍五入 Math.round(3/2) // 2 4.向下取整 // 向下取整,丢弃小数部分 Math.floor(3/2) // 1
1.取余 console.log(7%4); // 3
一个包解决你所有的JS问题,点击获取
String对象的方法
方法一: indexOf() (推荐)
var str = "123"
console.log(str.indexOf("2") != -1); // true
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
方法二:match()
var str = "123"
var reg = RegExp(/3/);
if(str.match(reg)){
//包含；
}
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
方法三: search()
var str = "123"
console.log(str.search("2") != -1); // true
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
RegExp对象的方法
方法四: test()
var str = "123" var reg = RegExp(/3/); console.log(reg.test(str) != -1); // true
test() 方法用于检索字符串中指定的值。返回 true 或 false。
方法五:exec()
var str = "123"
var reg = RegExp(/3/);
if(reg.exec(str)){
//包含；
}
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
如果大家想对JS有深入系统的学习，可以参阅 JavaScript核心技术开发解密 这本经典读物。
//校验是否全由数字组成
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}
//校验用户姓名：只能输入1-30个以字母开头的字串
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}
//校验密码：只能输入6-20个字母、数字、下划线
function isPasswd(s)
{
var patrn=/^(w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}
//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
function isTel(s)
{
//var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?(d){1,12})+$/;
var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}
//校验手机号码：必须以数字开头，除数字外，可含有“-”
function isMobil(s)
{
var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}
//校验邮政编码
function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}
//校验搜索关键字
function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|\][]{}:;',.<>/?]{1}[^`~!@$%^&()+=|\][]{}:;',.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}
//校验是否IP地址
function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
"^\d+$" //非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$" //正整数
"^((-\d+)|(0+))$" //非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$" //负整数
"^-?\d+$" //整数
"^\d+(\.\d+)?$" //非负浮点数（正浮点数 + 0）
"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数
"^((-\d+(\.\d+)?)|(0+(\.0+)?))$" //非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数
"^(-?\d+)(\.\d+)?$" //浮点数
"^[A-Za-z]+$" //由26个英文字母组成的字符串
"^[A-Z]+$" //由26个英文字母的大写组成的字符串
"^[a-z]+$" //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串
"^\w+$" //由数字、26个英文字母或者下划线组成的字符串
"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" //email地址
"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$" //url
"^[A-Za-z0-9_]*$"
// var str1 = str.replace(/[\'\"\\\/\b\f\n\r\t]/g, '');// 去掉转义字符
// var str2= str.replace(/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?]/g, '');// 去掉特殊字符
// return str2;
var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
return ( containSpecial.test(s) ); 判断是否含有
var filterRule= /[^0-9a-zA-Z_]/g;
var judge= filterRule.test(str); //判断传进来的数据是否含有特殊字符。test函数返回匹配结
var rows=JSON.stringify(rows);////将json对象转换成json对符串
var rows=JSON.parse(rows);//将json字符串转换成json对象
的时候别人可能会故意刷我们的网站链接，在后面加上参数来访问网站，例如‘http://test.codelovers.cn/?_t=1539913651’我们想实现的效果是自动去掉后缀包含？部分，实现代码如下
if(top != self){
top.location=self.location;
}
else{
var url = location.search;
if(url){
var old_url = window.location.href;
var new_url = old_url.substring(0, old_url.indexOf('?'));
self.location = new_url;
}
}