任务要求背景图片向上移动30px,但是设置background-position:0 30px;(沿Y轴向下移动30px)两者都能正常显示颜色切换效果,实际原因是由于background-repeat默认是repeat平铺值,如果设置no-repeat值则会导致向下移动后的背景圆角图无法正常显示。
定义公共样式*{box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
这样设置可以让当设置padding值的时候,不会增加盒子的大小;那串样式意思为,border和padding计算入width/height之内,width/height包含了盒子的border,padding,内容的width/height的大小。当然这是css3样式,IE7读不到【滑稽】
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
这样设置可以让当设置padding值的时候,不会增加盒子的大小;那串样式意思为,border和padding计算入width/height之内,width/height包含了盒子的border,padding,内容的width/height的大小。当然这是css3样式,IE7读不到【滑稽】
2017-06-10
背景图片两张合成一张确实有炫技之嫌(做成两张不是方便我们理解吗?)
而且视频技术落后了,现在用border radius就能解决了
w3c
http://www.w3school.com.cn/cssref/pr_border-radius.asp
而且视频技术落后了,现在用border radius就能解决了
w3c
http://www.w3school.com.cn/cssref/pr_border-radius.asp
2017-06-05