这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如：
[class^="test"] { background:#ffff00}
表示设置 class 属性值以 "test" 开头的所有元素的背景色，也就是说对class="test", class="test1" class="test-001"的元素都是有效的。
除此之外，还有一些常用的css属性选择器如下：
[attribute~=value] 选取属性值中包含指定词汇的元素
[attribute|=value] 选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
CSS中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度，在window对象中有一个devicePixelRatio属性，他可以反应CSS中的像素与设备的像素比
devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio=物理像素/独立像素
1、0.5px边框
2、使用border-image边框图片实现
3、使用background-image背景图片实现
4、多背景渐变实现
5、使用box-shadow模拟边框
6、viewport+rem实现
css定义背景图：--------------------------------------------------------------------------------------
background:背景颜色 url(背景图片路径及名字) 重复方式 对齐方式或精确位置
--------------------------------------------------------------------------------------
1.背景色：#123456、rgb(128,230,30)、red、blue，省略不写则为transparent(无背景色透明)；
2.url()：里面写 背景图片路径及名字，如：images/test.gif；可省略直接写为：
background:red(指定红色为背景色，没有图片背景)
3.重复方式：
no-repeat(任何方向都不重复)
repeat(x、y横竖方向都重复)
repeat-x(横向重复)
repeat-y(竖着重复)；
不带此以上参数直接写作：
background:url(bg.jpg)
则上句效果等于下句：
background:url(bg.jpg) repeat
4.对齐方式：
用left、top、right、bottom、center定义背景图在元素中的显示位置；
一旦定义了url()背景图，该图片默认为在区块的左、上位置开始显示，即：
background:url(bg.jpg)等于 background:url(bg.jpg) left top
例子：
background:url(bg.jpg) no-repeat center bottom
上一行的意思是：背景图不重复，在元素横向的中间及竖向的底部开始显示
还有直接写数字方法精确定位背景图位置：
background:url(bg.jpg) no-repeat 10px 10px
意思是定一个背景图，不重复，从元素的0坐标(左上角)开始，横竖方向各位移10像素后开始显示
更多例子：
--------------------------------------------------------------------------------
background:url(bg.jpg)
什么参数都没跟，这个背景图会从左上角开始往横竖两个方向不断重复平铺显示
background:url(bg.jpg) no-repeat
加了no-repeat，意思是这张背景图不往任何方向重复重复，位置在左上角，等于：
background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) no-repeat right bottom
背景图不重复，出现位置在区块的右边、底部
背景默认是出现在左边、顶部：
background:url(bg.jpg) no-repeat相当于：background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) repeat-y
背景图y方向重复。即竖着重复，横向不重复
background:url(bg.jpg) repeat-x
跟上面相反，x横向重复，竖向不重复
background:url(bg.jpg) repeat
后面没跟-x或-y，就是横竖都重复，等同于默认情况：background:url(bg.jpg)
background:url(bg.jpg) repeat-y right
竖向重复，横向不重复，靠右对齐
明白了么：no-repeat right 不等于 repeat-y right
一个是背景图不重复，从右上角开始显示对齐
一个是背景图竖着重复，从右上角开始显示对齐
