杂记(一些CSS的透明,阴影,渐变样式以及关于浏览器缩放的对应操作)
来源:互联网 发布:高金 知乎 编辑:程序博客网 时间:2024/05/21 17:00
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)
- 杂记(一些CSS的透明,阴影,渐变样式以及关于浏览器缩放的对应操作)
- CSS特殊样式(透明、旋转、阴影)
- 关于css渐变的一些收集
- 关于导航栏透明和渐变的一些设置
- 透明样式,兼容全浏览器的css写法如下
- Android 透明的状态栏有渐变的阴影效果
- 关于CSS样式的一些小结
- 关于切换css样式的一些方法
- 关于h5-app的一些css样式
- 圆角、阴影、渐变、透明
- 各浏览器CSS样式兼容性问题的一些解决方法
- 树的一些操作,杂记
- 浏览器兼容的css阴影效果
- 兼容各种浏览器的透明样式
- 跨浏览器的CSS渐变解决方案
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
- iOS 关于navigationBar的一些:毛玻璃、透明、动态缩放、动态隐藏
- iOS 关于navigationBar的一些:毛玻璃、透明、动态缩放、动态隐藏
- hdu2566 统计硬币(C语言)
- 归并函数
- DBCP与C3P0连接池以及基本分页的实现
- LeetCode Graph:M207_Course_Schedule
- 将轮播图组件化
- 杂记(一些CSS的透明,阴影,渐变样式以及关于浏览器缩放的对应操作)
- It seems that this file has not been built yet.Do you want to build it now? Codeblocks能构建build不能运ru
- java面试题库
- jQuery遍历之next()方法
- Django框架之模型(models)ORM对象关系映射描述
- 工作笔记(四)
- 仿github404特效
- (转)区块链创造了ICO,但是无法守护ICO
- j2ee 有哪些优势?