1、Bootstrap中.hidden的属性是这么写的：
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
例子：
<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>
2、设置背景颜色透明度：
如下图这个效果：
在需要加背景透明的元素加个：
background: rgba(255, 255, 255, 0.5);
解释：
使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。
RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。
就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。
浏览器兼容性
RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。
css样式如下：
background: rgba(255, 255,255, 0.5);
color: rgba(0, 0, 0,0.5);
3、给元素边框添加阴影：
博客写的很好：http://blog.csdn.net/freshlover/article/details/7610269
如下图需要给边框设置阴影：
代码：
box-shadow: 0 0 26px 7px #ddd;
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
还可以给阴影添加透明效果：.box-shadow-3{
- -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
- -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
- box-shadow:0 0 10px rgba(0, 204, 204, .5);
- }
- .box-shadow-6{
- box-shadow:-10px 0 10px red, /*左边阴影*/
- 10px 0 10px yellow, /*右边阴影*/
- 0 -10px 10px blue, /*顶部阴影*/
- 0 10px 10px green; /*底边阴影*/
- }
4、上传文件：
在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，<input type="file" />隐藏，点其他的标签（图片等）来时实现选择文件上传功能。
源自网站：http://www.jb51.net/article/40382.htm
这边自己写的：
<div class="choose_button">
<input type="button" value="选择文件" class="choose_button1" />
<input type="file" name="input_file" id="input_file" class="none"/>
</div>css样式：
.none {
width: 0px;
height: 0px;
display: none;
}js代码：
$(function(){
/* 选择文件弹出input file对话框 */
$(".choose_button1").click(function(){
return $("#input_file").click();
});
});
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
