在网上搜索整理了比较常见的10种css效果， 一般要用的时候 我就喜欢直接粘贴复制，在修改一下数据，希望对大家有用。
css公共部分
@charset "utf-8"; html { color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html * { outline: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body { font-family: sans-serif; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } input, select, textarea { font-size: 100%; } /* 去掉各 Table cell 的边距并让其边重合 */ table { border-collapse: collapse; border-spacing: 0; } /* 去除默认边框 */ fieldset, img { border: 0; } /* 去掉 firefox 下此元素的边框 */ abbr, acronym { border: 0; font-variant: normal; } /* 一致的 del 样式 */ del { text-decoration: line-through; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 500; } /* 去掉列表前的标识, li 会继承 */ ol, ul { list-style: none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ caption, th { text-align: left; } /* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */ h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; } q:before, q:after { content: ''; } /* 统一上标和下标 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* 正常链接 未访问 *//* 鼠标悬停 */ a:hover { text-decoration: underline; } /* 默认不显示下划线，保持页面简洁 */ ins, a { text-decoration: none; }
html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} body{-webkit-overflow-scrolling: touch; -webkit-touch-callout: none;} html{-webkit-tap-highlight-color:none;-webkit-tap-highlight-color:none} address,cite,dfn,em,var,i,s{ font-style:normal;font-weight: normal; } s{text-decoration: none;} a{cursor: pointer;} h2,h3,h4,h5{font-weight: normal;} a,input,textarea{outline:none;border: none;} a:hover{text-decoration: none;} textarea{resize:none;overflow:auto;} li{list-style:none} img{vertical-align:middle} table{border-collapse:collapse;border-spacing:0;} p{word-wrap:break-word} input, textarea { border: 0; -webkit-appearance: none; } /* 设置HTML5元素为块 */ article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {display:block;} a,img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */} a,button,input,optgroup,select,textarea{ -webkit-appearance: none;/*屏蔽阴影*/-webkit-tap-highlight-color: rgba(0,0,0,0;)} /*ios android去除自带阴影的样式*/ input:-webkit-autofill{ background-color: hsl(65, 100%, 87%); background-image: none; color: #000000; }/** input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色*/ input,input[type="text"],input[type="password"] { -webkit-appearance: none; } /*ISO圆角的解决方案*/ .clearfix:after{content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}/*清除浮动*/ .clearfix{zoom:1;} select { border: solid 1px transparent; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: #FFFFFF; } select option{border: 1px solid saddlebrown;} select::-ms-expand { display: none; }
html部分
九种css大全
单独的一种
- 你好我是1
- 你好我是2
- 你好我是3
- 你好我是4
- 你好我是5
- 你好我是6
- 你好我是7
- 你好我是8
9中集合
转载原文地址[http://www.internetke.com/effects/css3/2016/0424/1909.html]