您的位置：首页 > Web前端 > CSS

Css三角形 div全屏 半透明

2012-08-06 21:31 316 查看
1. 三角形的制作

方法一：

对于这样一个 <div id="boder_arrow"></div>，使用#boder_arrow{border-left-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;lineheight:0}，

效果如图：



当然，我们可以通过改变border-color的属性值（如transparent）来得到四个三角形中的任意一个，也可以通过改变各个方向的border-width(如border-top-width等)来改变三角形的角度。如：border-color: transparent #FF6699 transparent transparent;border-style:
solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;

方法二：

通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持。

2.让Div充满整个浏览器屏幕

由于html ，body，div标签默认的高度都是随着内容的变化而变化的，所以我们需要从外到内设置他们的height样式才可以使div充满整个浏览器屏幕：<html style="height:100%"⋯⋯<body style="height:100%"⋯⋯<div style="100%"⋯

3.实现半透明效果

方法一：使用半透明图片（*.png/.gif）作为元素背景；

方法二：使用transparent实现透明，使用滤镜（只能在IE显示效果）实现半透明：filter:Alpha(opacity=0.3),Js实现代码为：

document.getElementById("myElement").style.filter=
"alpha(opacity=40)";//
针对IE

方法三：Html5新属性：rgba(r,g,b,opacity)和opacity都可以设置元素的透明度;

方法四：使用JQuery设置和改变CSS透明度

　　 直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({ opacity: .4 });
// 所有浏览器有效


　　 您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({
opacity: .4
}, 1000, function() {
// 动画完成，所有浏览器下有效
});


　　不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

　　如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航