不可不知的CSS小技巧
一、表单部分
1.禁止textarea文本域的缩放
resize:none;
2.去除初始化textarea下拉条
overflow:auto;
3.如何让表单中的选项按钮，点击文字也能选中？
<lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable>
4.如何让文本垂直对齐文本输入框
input{vertical-align:middle;}
5.如何做1像素细边框的table？
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id="test">
<tr><th>姓名</th><td>少年</td></tr>
<tr><th>年龄</th><td>20</td></tr>
</table>
二、其它部分
1.如何让单行文本在容器内垂直居中？
#test{height:25px;line-height:25px;}
2.如何让块级元素居中显示？
#test{width:900px;height:200px;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;
}
转载于:https://www.cnblogs.com/moxiaowohuwei/p/7454818.html
不可不知的CSS小技巧相关推荐
- 12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
- 你可能不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧[1],介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS- ...
- css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中 将一段文字置于容器的水平中点 ...
- 日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
- css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能 确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时 就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
- 10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录 前言 普通渐变 条纹 条纹重复 虚线 斜向条纹 三角形 进度条动画 progress 网格 圆点阵列 波点图案 前言 本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
- 一些你可能不知道的 Python 小技巧！
[CSDN 编者按]Python 风头正盛,未来一段时间内想必也会是热门编程语言之一.因此,熟练掌握 Python 对开发者来说极其重要,说不定能给作为开发者的你带来意想不到的财富. 作者 | Seb ...
最新文章
- 大厂与小厂工作的选择
- php小结,PHP编程小结
- C++STL的vector中front(),back(),begin(),end()的用法
- c 解析java byte,深入解析Java编程中面向字节流的一些应用
- A star算法优化一
- Android Multimedia框架总结（二十五）MediaProjection实现手机截屏（无须root）
- 简单聊聊智能硬件的固件测试
- 信息系统项目管理（二）网络协议、网络存储技术、网络工程、数据仓库和中间件
- 惠普打印机如何设置扫描到计算机,惠普打印机怎样扫描文件到电脑
- 计算机管理怎么看内存条,内存条,教您怎么查看内存条的型号
- 【jQuery】jQuery对象与prevObject
- MyEclipse8.5开发环境配置，SVN插件安装问题（转载）
- 记录每天背的单词，准备考研。（2月13日）
- 【项目管理工具】—— Microsoft Office Project 介绍
- 移动终端软件高级开发技术------- 记账本
- Amdahl定律和Gustafson定律
- linux Netfilter在网络层的实现详细分析（iptables）
- 景观设计主题命名_景观设计主题
- 论文翻译 | RandLA-Net: Efficient Semantic Segmentation of Large-Scale Point Clouds
- 计算机电源整流滤波,整流、滤波电路工作原理