随笔分类 -  CSS

first-child与first-of-type区别
摘要：div p:first-child //div元素的第一个子元素，且子元素是p div p:first-of-type //div元素的第一个子元素p 阅读全文
posted @ 2018-10-09 10:28 灵哆哆 阅读(164) 评论(0) 推荐(0)
解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题
摘要：最近项目遇到一个问题： 处理多行文本溢出的样式，但是在webpack编译之后，-webkit-box-orient:vertical 这个样式丢失了 解决方法： 阅读全文
posted @ 2018-09-27 14:39 灵哆哆 阅读(578) 评论(0) 推荐(0)
清除浮动
摘要：清除浮动的方法：父级div定义 伪类:after 和 zoom 代码如下: <style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px soli 阅读全文
posted @ 2018-04-13 13:16 灵哆哆 阅读(109) 评论(0) 推荐(0)
纯CSS实现气泡聊天框的方法
摘要：纯CSS实现气泡聊天框的方法 气泡聊天框实现 运行结果： 阅读全文
posted @ 2017-04-01 17:12 灵哆哆 阅读(763) 评论(0) 推荐(0)
css实现箭头矩形流程效果
摘要：第1步 第2步 第3步 第4步 ... 阅读全文
posted @ 2017-03-31 15:41 灵哆哆 阅读(2525) 评论(0) 推荐(0)
上传文件控件的样式美化
摘要：实现原理： 第一步：分别建一个input[type=text]、一个input[type=button]标签，优化样式； 第二步：把input[type=file]标签，设置透明，位置对齐以上的两个标签并位于其底部； 第三步：用jquery实现把input[type=file]的文字显示在input 阅读全文
posted @ 2017-03-30 16:42 灵哆哆 阅读(333) 评论(0) 推荐(0)
Input placeholder 字体颜色更改
摘要：/* WebKit browsers */ input::-webkit-input-placeholder { color: #999; } /* Mozilla Firefox 4 to 18 */ input:-moz-placeholder { color: #999; } /* Mozil 阅读全文
posted @ 2017-03-29 10:59 灵哆哆 阅读(219) 评论(0) 推荐(0)
如何为全局所有input组件添加边框发光效果
摘要：input[type=text]:focus,input[type=password]:focus,textarea:focus{ outline:none; border-color:rgba(241,39,62,.75); /*设置边框阴影*/ -webkit-box-shadow:0 0 8p 阅读全文
posted @ 2017-03-29 09:51 灵哆哆 阅读(555) 评论(0) 推荐(0)