【www.bbyears.com--flex】
在没有背景和图片填充的情况下,火狐和Chrome下不能直接点击绝对定位层下面的元素(比如链接),下面的链接被上面的绝对定位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。
对于这种问题需要用到一个css3的属性,可以通过给绝对定位的层多加一个样式 pointer-events:none; 以后, 绝对定位层下的元素就可以点击了。
光给绝对定位的层添加pointer-events:none; 的样式是不够的,你可以发现所有在此层里的元素,都不能点击了,就连链接和按钮也同样不起作用,所以我们需要给绝对定位层中的其他非空的元素把样式再返回。
给里面的元素重新设置为 pointer-events:auto,只给需要操作的元素区域设置即可。
查看演示页面
pointer-events属性有很多值:
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
下面介绍一下pointer-events这两个属性值详细描述
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。
对于浏览器兼容的问题:Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性。
例子
<script src="/js/jquery-1.7.1.min.js" language="javascript"></script>
<script language="javascript">
$(document).ready(function(){
$("textarea").each(function(){
$(this).height($(this)[0].scrollHeight);
});
})
</script>
圆角的css
盒装阴影的css
线性渐变的css
透明的css
旋转的css
服务器端字体的css
圆角的css (Rounded Corner)
盒装阴影的css (Box Shadow)
-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。
线性渐变的css (Gradient)
-moz-linear-gradient
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
-webkit-gradient
-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
DXImageTransform.Microsoft.gradient
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
透明的css (Opacity)
旋转的css (rotation)
除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数SizingMethod表示重绘方式,"auto expand"代表自动扩展到新的边界。
除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。
服务器端字体的css (font-face)
第一行代码:
font-family: "MyFont";
表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。
src: url("myfont.eot");
这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。
src: local("myfont.ttf"),
url("myfont.woff") format("woff"),
url("myfont.ttf") format("truetype");
local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。
然后,使用的时候这样写就可以了。
h2{ font-family: "MyFont"; }
需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的"同源政策"。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。