一些css小用法总结
来源:互联网 发布:王者荣耀天魔缭乱优化 编辑:程序博客网 时间:2024/06/05 02:18
1、用:before和:after实现小尖角效果
<div class="div"></div>
.div{ background: #fff; border: 2px solid #000; height: 100px; width: 100px; position: relative;}.div:after,.div:before{ border:0 solid transparent; position: absolute; top: 100%; content: '';}.div:before{ border-width: 12px; border-top-color: #000; left: 38px;}.div:after{ border-width: 10px; border-top-color: #fff; left: 40px;}
2、怎么只给盒子一侧加box-shadow
<div class="box-shadow">一侧阴影</div>
.box-shadow { position: absolute; top: 50%; left: 50px; width: 100px; height: 100px; background-color: #188eee;}.box-shadow:after { position: absolute; left: 10px; bottom:0; width: 80px; height: 1px; display: block; z-index: -1; content: ""; -webkit-box-shadow: 0px 0px 10px 5px #000; -moz-box-shadow: 0px 0px 10px 5px #000; box-shadow: 0px 0px 10px 5px #000;}
3、在不改变box-sizing的情况下,怎么使用text-indent和padding-left来缩进内容
text-indent:首行缩进、不影响width(ie67下和inline-block使用有兼容性问题http://www.cnblogs.com/dothin/p/4979521.html)
用法:缩进,隐藏logo文字
.logo{ text-indent: -9999px; width: 300px; height: 100px; background: transparent url("imgs/logo.png") no-repeat;}
padding-left:整体缩进,影响width
4、行溢出内容以省略号形式显示
{width: px; overflow: hidden; text-overflow: ellipsis; white-space: nowarp;}鼠标移入显示:hover{ text-overflow: inherit; overflow: visible;}
5、表格溢出省略号显示
table{ width:400px; border-collapse: collapse; table-layout: fixed;/*保持单元格的等宽*/}td{ border: 1px solid #ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
6、强制长英文单词换行
word-wrap: break-word; /*不会切断单词*/word-break:break-all;/*要切断单词*/
7、用background-size:0 200%;给背景加渐变动画
<div class="button">背景切换</div>
.button { padding:10px 5px; border-radius: 4px; color: #fff; font: 16px sans-serif; width: 160px; text-align: center; background-image: linear-gradient(#155aaa, #188eee); background-size: auto 200%; background-position: 0 100%; -webkit-transition: background-position .3s; -o-transition: background-position .3s; transition: background-position .3s;}.button:hover { background-position: 0 0;}
8、我们可以用text-shadow给文本加阴影,那么你试过模糊文本吗
.text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
9、强制显示页面滚动条
html { height: 101% }
10、跨浏览器的min-height用法
.container { min-height: 400px; height: auto !important; height: 400px;}
11、怎么给body顶部加固定阴影效果
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 9999;}
12、活用:not来排除元素
在ie时代,要给一串li除了最后或者第一个以外都加border-right(border-left),我们需要单独给最后一个或者第一个添加class才可以实现,现在是css3时代了,我们完全没必要这么做,仅仅只需要一个:not和一个:last-child或者:first-childli:not(:last-child){border-right:1px solid red;}瞬间心情舒畅~~
13、居中所有元素
html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}其他居中方法:http://www.cnblogs.com/dothin/p/4971703.html
14、用负的 nth-child 选择元素1到元素n
li { /*……*/}/* 选择从1到n的元素 */li:nth-child(-n+3) { /*……*/}
15、清除浮动的常见做法有哪些
1)加高度(但是扩张性不好)
2)父级浮动(不固定宽度的情况下,宽度会变为自适应内容)
3)display:inline-block 清浮动方法(不固定宽度的情况下,宽度会变为自适应内容)
4):after伪类 清浮动方法(主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
5)overflow:hidden 清浮动方法(不允许溢出内容,在需要有溢出的时候这种方法不可行
6)position:absolute、fixed 清浮动。(不固定宽度的情况下,宽度会变为自适应内容,还可以使内联元素支持宽高)
所以以下内容不需要清浮动:
绝对定位或固定定位元素、浮动元素、固定高度的元素、添加了overflow溢出隐藏的元素
16、给元素加360翻转效果
.product li img { height:270px; width:200px; -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); -webkit-transition:-webkit-transform 1s; -ms-transition:-ms-transform 1s; transition:transform 1s;}.product li:hover img { -webkit-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0);}/*要使鼠标移出也翻转,所以360deg写在前面*/
- 一些css小用法总结
- css布局的一些小总结
- css中的一些选择器的用法总结
- Qt QTableWidget用法的一些小总结
- CSS一些小总结——个人向
- css一些小tip
- css:一些小知识
- CSS一些用法
- css一些常用用法
- JS一些小用法
- CSS 小总结
- css学习小总结
- CSS小总结
- CSS知识点小总结
- CSS 小总结
- CSS样式小总结
- CSS小技巧总结
- css小总结
- WEKA使用教程(经典教程转载)
- Linux(CentOS)网络流量实时监控(iftop)
- 第6周项目1 - 建立顺序栈算法库
- 恢复实战:用完整的数据库文件恢复数据库
- ShellExecute, WinExec, CreateProcess区别
- 一些css小用法总结
- 第十二周 项目四 (2) 利用遍历思想求解图问题
- 第十三周项目4-Floyd算法验证
- 项目4 -- 每对顶点之间的最短路径
- Android LruCache图片缓存使用(一)
- 第十二周 项目4-利用遍历思想求解图问题(5)
- 选择排序
- 网络舆情分析技术 读书笔记1
- QT中QFileDialog的使用