最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
不可不知的CSS小技巧
时间:2016-03-30 编辑:简简单单 来源:一聚教程网
一、表单部分
1.禁止textarea文本域的缩放
resize:none;
2.去除初始化textarea下拉条
overflow:auto;
3.如何让表单中的选项按钮,点击文字也能选中?
4.如何让文本垂直对齐文本输入框
input{vertical-align:middle;}
5.如何做1像素细边框的table?
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
姓名 | 少年 |
---|---|
年龄 | 20 |
二、其它部分
1.如何让单行文本在容器内垂直居中?
#test{line-}
2.如何让块级元素居中显示?
#test{margin:0 auto;}
3.如何清除图片下方出现几像素的空白间隙?
方法1:img{display:block;} 方法2: img{vertical-align:top;}
4.常见的链接样式
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时,请按照以下次序规则:a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后
5.将一个容器设为透明
#test{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
在这四行CSS语句中,第一行是IE专用的,第二行用于Firefox,第三行用于webkit核心的浏览器,第四行用于Opera。
6.CSS3阴影
外阴影:
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
内阴影:
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
总结:实战才是检验理论的唯一标准。不去做,永远是不明白这其中的实现原理。
-
上一个: css3常用伪类选择改变表单样式
-
下一个: 使用CSS3制作文字、图片倒影
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26