杂记（一些CSS的透明，阴影，渐变样式以及关于浏览器缩放的对应操作）

最新推荐文章于 2024-07-27 10:59:54 发布

banmao8461

最新推荐文章于 2024-07-27 10:59:54 发布

阅读量217

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AB786883603/p/8325399.html

版权

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)