CSS - 随笔分类 - Asina

前端浏览器兼容问题总结

摘要：前端解决不同浏览器及不同版本的兼容性问题浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。解决方案：CSS里*{margin:0; padding:0;}备注:这个是最常见的也是最易解决的一个浏览器兼阅读全文

posted @ 2017-02-23 10:22 Asina 阅读(6236) 评论(0) 推荐(2)

元素垂直居中的三种实现方式

摘要：1. 使用定位position: relative脱离文档流，top的偏移量为top: 50%, margin: -元素高度的一半 auto 0 auto;2. 使用定位position: relative脱离文档流，top的偏移量为top: 50%,使用transform: translateY( 阅读全文

posted @ 2017-02-08 15:48 Asina 阅读(379) 评论(0) 推荐(0)

移动端点击a链接出现蓝色背景问题解决

摘要：a:link, a:active, a:visited, a:hover { background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } 阅读全文

posted @ 2017-02-06 16:41 Asina 阅读(1747) 评论(1) 推荐(0)

css滤镜模糊效果filter和backdrop-filter

摘要：解释： filter的一些属性目前只有webkit支持 filter: grayscale(1) 灰度sepia 褐色saturate 饱和度hue-rotate 色相旋转invert 反色opacity 透明度brightness 亮度contrast 对比度blur 模糊drop-shadow 阅读全文

posted @ 2017-01-19 10:53 Asina 阅读(1734) 评论(0) 推荐(1)

CSS3盒模型display:box;box-flex:3;

摘要：注意：给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，阅读全文

posted @ 2016-12-23 16:06 Asina 阅读(201) 评论(0) 推荐(0)

CSS移动端多行显示多余省略号

摘要：/*css3 多行显示省略号，也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 阅读全文

posted @ 2016-12-23 15:32 Asina 阅读(777) 评论(0) 推荐(0)

CSS之flex布局

摘要：运行结果：阅读全文

posted @ 2016-12-23 15:25 Asina 阅读(201) 评论(0) 推荐(0)

Autoprefixer处理CSS3属性前缀

摘要：http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html 阅读全文

posted @ 2016-12-02 14:44 Asina 阅读(156) 评论(0) 推荐(0)

用相对定位和负向移动完成图片相框阴影

摘要：Chorme浏览器的效果：阅读全文

posted @ 2016-10-08 11:35 Asina 阅读(174) 评论(0) 推荐(0)

鼠标经过图片放大归纳

摘要：示例效果阅读全文

posted @ 2016-09-05 13:43 Asina 阅读(299) 评论(0) 推荐(0)

CSS实现特殊效果

摘要：CSS实现三道杠效果 http://jsbin.com/hocopusuvi/edit?html,css,output CSS实现圆点效果 http://jsbin.com/nojiromaje/edit?html,css,output 阅读全文

posted @ 2016-08-27 18:21 Asina 阅读(392) 评论(0) 推荐(0)

修改上传文件按钮

摘要：HTML： CSS：阅读全文

posted @ 2016-08-08 11:55 Asina 阅读(768) 评论(0) 推荐(0)

CSS3制作3D旋转视频展示区

摘要：Document CSS3 3D制作练习闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴. ... 阅读全文

posted @ 2016-08-06 11:23 Asina 阅读(380) 评论(0) 推荐(0)

css深入理解之margin

摘要：margin:auto;实现垂直居中代码：http://jsbin.com/gesupehoxa/edit?html,css,output 绝对定位absolute与margin实现上下左右居中（仅支持IE8+）http://jsbin.com/xucarafaji/edit?html,css,o 阅读全文

posted @ 2016-07-13 22:29 Asina 阅读(225) 评论(0) 推荐(0)

position:fixed相对父级元素定位而不是浏览器

摘要：position:fixed默认是相对浏览器定位的原理：fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位代码：http://jsbin.com/tegodideyi/edit?html,css,output HTML布局： CSS样式：阅读全文

posted @ 2016-07-10 10:21 Asina 阅读(4720) 评论(0) 推荐(1)

css多行文本溢出显示省略号

摘要：HTML： CSS：结果：阅读全文

posted @ 2016-07-08 23:11 Asina 阅读(193) 评论(0) 推荐(0)

CSS改变placeholder的颜色

摘要：:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a1a1a1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #a1a1a1; } input:-ms-input-placeholder, textarea:-ms-input-placeh... 阅读全文

posted @ 2016-07-05 14:44 Asina 阅读(257) 评论(0) 推荐(0)

遮罩动画效果

摘要：遮罩动画效果俺妹不可能那么可爱阅读全文

posted @ 2016-06-13 17:57 Asina 阅读(542) 评论(0) 推荐(0)

css改变透明背景png图片的图标颜色

摘要：HTML: CSS: 效果：学习来自[张鑫旭的空间] 阅读全文

posted @ 2016-06-11 15:04 Asina 阅读(5601) 评论(0) 推荐(0)

前端页面重构切图优化

摘要：定义 CSS：初始化样式：公共样式：切图方式：打开PSD文件，点击选择按钮，选中自动选择，下拉选择图层，然后点击要选择的图层（特殊的转换为智能对象），然后用虚线框选出来，复制粘贴到一个空白文件。点击直接拨号<a href="tel:123-456789">123-456789</a> 阅读全文

posted @ 2016-06-10 16:52 Asina 阅读(335) 评论(0) 推荐(0)

随笔分类 - CSS

公告