1 box-shadow
属性与text-shadow
(IE9+)
box-shadow
属性能使框添加一个或多个阴影,格式为:
box-shadow: h-shadow v-shadow [blur spread color inset];
其中:
- h-shadow:必选,表示水平方向阴影的位置,可以为负值;
- v-shadow:必选,表示垂直方向阴影的位置。可以为负值;
- blur:可选,表示模糊度;
- spread:可选,阴影的大小尺寸;
- color:可选,颜色;
- inset:可选,用于改写成内阴影,默认值是
outset
,可以改写成inset
box-shadow: 10px 10px 10px 10px black inset;
text-shadow
属性向文本添加一个或多个阴影,格式为:
text-shadow:h-shadow v-shadow blur color;
定义按钮凹下去的效果,可以这样定义
.active {
box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);//定义内外阴影
text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
2 opacity
属性与rgba
属性
2.1 opacity
属性
opacity
属性用于定义透明度,取值范围为0~1
,其定义的透明度会直接影响其子元素,对于IE8及之前的浏览器只能使用:filter:Alpha(opacity=50)
这个filter 属性替代
2.2 rgba
属性(IE9)
rgba
属性类似于rgb
属性用于表达颜色,区别在于rgba
还多一个参数用于表示透明度。该透明度取值范围为0~1
。
与opacity
不同的是,子元素不会被其影响,例:
background-color:rgba(255,255,255,0.1);
3 线性渐变颜色linear-gradient
属性(IE10+)
具体看这里
background
属性使用linear-gradient
属性值可以达到线性渐变颜色的效果
linear-gradient
自身的语法是:
linear-gradient(angle,color-top length || percentage,color length || percentage)
其中:
angle
表示渐变线的方向,关键字值有to left
,to right
,to top
,以及默认值to bottom
,另外还可以使用角度如270deg
color-top
:指定初始颜色color
:结尾颜色length
或percentage
:定义止色位置
实例如:
body {
background:linear-gradient(#191c20 0%, #24292e 15%) ;
}
3 关于检测用户缩放浏览器
在编写固定定位的时候,当缩放浏览器并进行滚动页面时,有时会想要取消掉固定定位,这时可以使用上jQueryresize()
事件以及scroll
事件。
3.1 resize()
事件与scroll()
事件
3.1.1
注:CSS中的
resize
属性可用于允许用户调节元素的尺寸大小, 数值有none
(默认值),both
(高和宽都可调控),horizontal
(可调宽),vertical
(可调高)。
常常用设置浏览器默认的textarea
标签,使之不可大小不由用户调控。
Firefox 4+、Safari 以及 Chrome 支持 resize 属性。
JavaScript的 onresize()
事件对应jQuery的就是 resize()
事件,当浏览器窗口大小被调整时就会触发事件函数。一般来说,resize
事件函数都会绑定在**$(window)
对象**(JavaScript的是 window
对象或 body
标签)中。
3.1.2 scroll()
事件
JavaScript的 onscroll()
事件对应jQuery的就是 scroll()
事件,当浏览器滚动条被滚动时就会触发事件函数。一般来说,scroll
事件函数都会绑定在 $(window)
对象(JavaScript的是 window
对象或 body
标签)中。
有了事件函数的支持,通过一些元素的属性比较,可以决定响应的动作。
3.2 scrollLeft()
方法,scrollTop()
方法,offset().top
属性以及offset().left
属性
这些方法属性都是对应jQuery对象的方法属性,使用
$(window).width()
以及$(window).height()
方法可以返回浏览器可视窗口的宽度以及长度
3.2.1 scrollLeft()
方法,scrollTop()
方法
scrollLeft()
,scrollTop()
方法是一个用于返回或设置浏览器滚动页面,滚动了的距离,一般来说都是绑定$(window)
对象。
使用
scrollLeft()
以及scrollTop()
实质是调用window.pageXOffset
以及window.pageYOffset
(这两个属性都不兼容IE8,IE8使用的是document.documentElement.scrollLeft
以及document.documentElement.scrollTop
)
3.2.2 offset()
方法,offset().top
属性以及offset().left
属性
offset()
方法用于 返回或设置匹配元素相对于文档的偏移(位置),如果要设置位置,则需要导入一个含top
以及left
键值对的对象作为参数,所以同理offset().top
属性可以返回匹配元素的偏移纵坐标,offset().left
属性返回匹配元素的偏移横坐标。
通过绑定
scroll()
和resize()
事件函数,比较offset().top
与scrollTop()
或offset().left
与scrollLeft()
的对应值,就可以编写出对应的响应动作。
注意:使用animate()
方法调整滚动距离时,其作用对象是$('html,body')
而不是$(window)