css不被遮,css 层遮挡无法点击解决 css pointer-events绝对定位层遮挡的问题解决办法...

最新推荐文章于 2023-05-17 17:52:05 发布

赶考状元

最新推荐文章于 2023-05-17 17:52:05 发布

阅读量810

点赞数 1

文章标签： css不被遮

$(document).ready(function(){

$('textarea').each(function(){

$(this).height($(this)[0].scrollHeight);

});

})

* {

padding:0;

margin:0;

}

h1 {

font-size:20px;

margin-top:15px;

border-bottom:1px dotted #ccc;

display:table;

}

textarea {

border:1px solid #ccc;

width:100%;

}

dt {

font-weight:bold;

}

#content {

width:80%;

margin:0 auto;

}

#nav {

position:fixed;

right:5px;

top:5px;

background:#000;

opacity:0.5;

filter:alpha(opacity=50);

padding:15px;

color:#fff;

}

#nav li {

list-style-type:none;

}

#nav li a {

color:#fff;

text-decoration:none;

}

#nav li a:hover {

text-decoration:underline;

}

.box {

width:80px;

height:80px;

display:block;

background-color: #D0D0D0;

margin:10px 5px;

}

#rgba {

position:relative;

height:150px;

}

#rgba .box {

position:absolute;

left:0;

top:0;

}

/******************************************************************************************/

.box_round {

-moz-border-radius: 10px; /* FF1+ */

-webkit-border-radius: 10px; /* Saf3+, Chrome */

border-radius: 10px; /* Opera 10.5, IE 9 */

}

.box_shadow {

border:1px solid #999;

-moz-box-shadow: 10px 10px 4px #666; /* FF3.5+ */

-webkit-box-shadow: 10px 10px 4px #666; /* Saf3.0+, Chrome */

box-shadow: 10px 10px 4px #666; /* Opera 10.5, IE 9.0 */

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666')"; /* IE8 */

}

.box_gradient {

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */

}

#rgba .box_rgba {

left:50px;

top:50px;

background-color:#03F;

opacity:0.5;

filter:alpha(opacity=50);

}

.box_rotate {

-moz-transform: rotate(7.5deg); /* FF3.5+ */

-o-transform: rotate(7.5deg); /* Opera 10.5 */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */

}

圆角的css
盒装阴影的css
线性渐变的css
透明的css
旋转的css
服务器端字体的css

圆角的css (Rounded Corner)

/* CSS3 */

.box_round {

-moz-border-radius: 30px; /* FF1+ */

-webkit-border-radius: 30px; /* Saf3+, Chrome */

border-radius: 30px; /* Opera 10.5, IE 9 */

}

盒装阴影的css (Box Shadow)

-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的，都有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。

IE 6~8使用其独有的滤镜，需要设置三个参数：offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。

/* CSS3 */

.box_shadow {

-moz-box-shadow: 3px 3px 4px #333333; /* FF3.5+ */

-webkit-box-shadow: 3px 3px 4px #33333; /* Saf3.0+, Chrome */

box-shadow: 3px 3px 4px #33333; /* Opera 10.5, IE 9.0 */

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333')"; /* IE8 */

}

线性渐变的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表示水平渐变。

/* CSS3 */

.box_rgba {

background-color: #B4B490;

background:transparent;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */

zoom: 1;

background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */

}

透明的css (Opacity)

/* CSS3 */

.box_gradient {

opacity:0.5;

filter:alpha(opacity=50);

}

旋转的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度。

/* CSS3 */

.box_rotate {

-moz-transform: rotate(7.5deg); /* FF3.5+ */

-o-transform: rotate(7.5deg); /* Opera 10.5 */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */

}

服务器端字体的css (font-face)

/* CSS3 */

@font-face {

font-family: 'MyFont';

src: url('myfont.eot'); /* IE6+ */

src: local('myfont.ttf'),

url('myfont.woff') format('woff'), /* FF3.6 */

url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */

}

.box_font{ font-family: "MyFont"; }

第一行代码：

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"; }

需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的"同源政策"。另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。

赶考状元

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css不被遮,css 层遮挡无法点击解决 css pointer-events绝对定位层遮挡的问题解决办法...

$(document).ready(function(){$('textarea').each(function(){$(this).height($(this)[0].scrollHeight);});})* {padding:0;margin:0;}h1 {font-size:20px;margin-top:15px;border-bottom:1px dotted #ccc;display:...
复制链接

扫一扫