内容简介:本文收集了我常用的CSS代码片段！*reset /** reset **/body，h1，h2，h3，h4，h5，h6，p，ul，ol，dl，dd，form，textarea { margin:0；}body { font-family: arial，\ 5b8b \ 4f53字体大小:12px行高:1.5；}h1，h2，h3，h4，h5，h6，input，textarea，section { font-size:100%；}input，textarea，section { font-family:inherit；}ul，ol {左填充:0；list-style-type:无；}表{ border-collapse:collapse；边框间距:0；}th，TD { padding:0；}em，th，var { font-style:normal；} img { border:0 none；垂直对齐:顶部；}a { text-decoration:无；}a:hover{text-decoration:下划线；} *输入与兼容。ipt { border:1px solid # 469021；背景:# 64A246颜色:# fff字体:bold 11px arial，无衬线；填充:0.25em 0.5em文本转换:大写；边距:0；溢出:可见；高度:27px行高:19px_ line-height:16px；宽度:80px} *css圆角。radius {-moz-border-radius:30px；-WebKit-border-radius:30px；边框半径:30px*水平翻转。flipx {-moz-transform:scaleX(-1)；-WebKit-transform:scaleX(-1)；-o-transform:scaleX(-1)；transform:scaleX(-1)；filter:FlipH()；*垂直翻转。flippy {-moz-transform:scaley(-1)；-WebKit-transform:scaleY(-1)；-o-transform:scaleY(-1)；transform:scaleY(-1)；filter:FlipV()；} * CSS rotation . rotate 90 { filter:progid:dximagetransform . Microsoft . basic image(rotation = 1)；-moz-transform:旋转(90度)；-o-transform:旋转(90度)；-webkit-transform:旋转(90度)；变换:旋转(90度)；} *css框阴影。box _ shadow {-moz-box-shadow:3 px 3 px 4 px # 000；-WebKit-box-shadow:3px 3px 4px # 000；盒影:3px 3px 4px # 000过滤器:progid:DXImageTransform。Microsoft.dropshadow(OffX=3px，OffY=3px，Color = ' # 000 ')；-ms-filter:" progid:DXImageTransform。Microsoft.dropshadow(OffX=3px，OffY=3px，Color = ' # 000 ')"；} *clearfix浮点型。Clearfix:之前，。Clearfix:在{内容:“”之后；显示:表格；}.clear fix:after { clear:both；}.clear fix { * zoom:1；} *锚点不能是空锚点链接*纯CSS三角形。三角形{宽度:0；高度:0；字体大小:0；行高:0；边框宽度:50px边框样式:纯色；边框-顶部-颜色:# fff边框-右边-颜色:# fff边框-底部-颜色:红色；边框-左侧-颜色:# fff} *透明度/*透明度*/。透明度{滤镜:alpha(透明度= 50)；-khtml-不透明度:0.5；-moz-不透明度:0.5；不透明度:0.5；} *选择文本颜色/*自定义文本选择颜色*/:选择{背景:# e2eae2}::-moz-selection {背景:# e2eae2}::-webkit-selection {背景:# e2eae2} *全屏背景/*全屏背景*/。封面{背景:URL ('bg.jpg ')无重复居中居中固定；-WebKit-背景-大小:封面；-moz-背景-尺寸:封面；-o-背景-尺寸:封面；背景-尺寸:封面；} *强制滚动条html { height:101% } * Gradient/* Gradient */。渐变{背景:# 629721；背景-图像:-WebKit-渐变(线性，左上，左下，从(#83b842)，到(# 629721))；背景-图像:-WebKit-线性-渐变(top，#83b842，# 629721)；背景-图像:-moz-线性-渐变(top，#83b842，# 629721)；背景-图像:-ms-线性-渐变(顶部，#83b842，# 629721)；背景-图像:-o-线性-渐变(顶部，#83b842，# 629721)；背景图像:线性渐变(顶部，#83b842，# 629721)；} * font-face/* font-face */@ font-face { font-family:' myweb font '；src:URL(' web font . eot ')；/* IE9兼容模式*/ src: url('webfont.eot？#iefix ')格式(' embedded-opentype ')，/* IE6-IE8 */ url('webfont.woff ')格式(' woff ')，/* Modern Browsers */URL(' web font . TTF ')格式(' truetype ')，/* Safari，Android，iOS */URL(' web font . SVG # svgFontName ')格式(' SVG ')；/*传统iOS */} body { font-family:' myweb font '，Arial，sans-serif；} *png透明/* png透明*/。png {宽度:200px高度:100px背景:url(this.png)不重复；_背景:无；_ filter:progid:DXImageTransform。Microsoft . alpha image loader(src = ' this . png '，sizing method = ' crop ')；/*路径相对于html */} *最小高度/*最小高度*/。min height { min-height:550 px；身高:自动！重要；高度:550pxAdminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。 我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在这个网站中，您可以学习最新的前端开发技术，了解前端开发的最新趋势和最佳实践。 我们提供丰富的教程和案例，让您快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供了一系列实用的工具和插件，帮助你更高效的进行前端开发。 我们提供的工具和插件都是经过精心设计和优化的，可以帮助您节省时间和精力，提高开发效率。 在Adminjs.cn，你可以找到让你成为更优秀的前端开发者所需的所有前端开发资源。 欢迎加入我们的大家庭，一起探索前端开发的无限可能！