工作中常用的样式和方法 yxl 2018-10-26 10:47:42 474文章目录 ##### 边框1px实现 1、下边框 ``` .scale-1px { position: relative; border: none; } .scale-1px:after { content: ''; position: absolute; bottom: 0; background: #e5e5e5; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } ``` 2、上边框 ``` .scale-1px-top { position: relative; border: none; } .scale-1px-top:before { content: ''; position: absolute; top: 0; background: #e5e5e5; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } ``` 3、4边框 ``` .scale-1px-4 { position: relative; border: none; } .scale-1px-4:after { content: ''; position: absolute; top: 0; left: 0; border-radius: 0.04rem; border: 1px solid #969bb1 !important; -webkit-box-sizing: border-box; box-sizing: border-box; width: 198%; height: 198%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } ``` 更详细的可以查看我的另外一篇文章:[解决移动端Retina屏幕1px边框问题](https://ah.yxlblog.com/index/article/101.html "解决移动端Retina屏幕1px边框问题") ##### 文本溢出省略号 下面的方式是基于WebKit浏览器或移动端的页面 1、单行文本省略号 ``` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` 2、多行文本省略号 ``` overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ``` 3、跨浏览器兼容的方案 设置相对定位的容器高度,用包含省略号(…)的元素模拟实现 ``` p { position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y; } ``` 这个方法注意几点: 1. height高度真好是line-height的3倍; 1. 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色; 1. IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟; 1. 要支持IE8,需要将::after替换成:after; ##### css箭头实现 方法不一定,根据自己的进行修改就行 1、实心箭头实现 ``` <style> .arrow { display: inline-block; width: 0px; height: 0px; border: 30px solid transparent; overflow: hidden; } /*向上箭头,只有三个边,不能指定上边框*/ .arrow-up { border-top: none; border-bottom-color: red; } /*向下箭头 ,只有三个边,不能指定下边框*/ .arrow-down { border-bottom: none; border-top-color: orange; } /*向左的箭头:只有三个边,不能指定左边框,向左三角形的高=上+下边框的长度。宽=右边框的长度*/ .arrow-left { border-left: none; border-right: 40px solid blue; } /*向右的箭头:只有三个边,不能指定右边框。向右三角形的高=上+下边框的长度。宽=左边框的长度*/ .arrow-right { border-right: none; border-left: 40px solid green; } </style> <span class="arrow arrow-up"></span> <span class="arrow arrow-down"></span> <span class="arrow arrow-left"></span> <span class="arrow arrow-right"></span> ``` 2、空心箭头实现 (1)、方法一 两个箭头重叠展示,第二个箭头小于第一个箭头,用颜色覆盖来展示线性箭头 ``` <style> .arrow-line { display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-top-color: #000; /* position: relative; */ } .arrow-b { float: left; border-width: 8px; border-top-color: #fff; margin-top: -10px; margin-left: -8px; /* position: absolute; top: 0; left: 0; */ } </style> <span class="arrow-line"> <span class="arrow-line arrow-b"></span> </span> ``` (2)、方法二 ``` .arrow-right{ display:inline-block; border-right: 1px solid #999faa; border-top: 1px solid #999faa; height: 10px; width: 10px; transform: rotate(45deg) translate(-50%,-50%); } <span class="arrow-right"></span> ``` ##### css垂直居中 详细请看我另外一篇文章:[css垂直居中的N中方法](https://ah.yxlblog.com/index/article/128.html) ##### 修改placeholder的样式 1、全局修改 ``` input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #b3b3b3; } input:-moz-placeholder, textarea:-moz-placeholder { color:#b3b3b3; } input::-moz-placeholder, textarea::-moz-placeholder { color:#b3b3b3; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#b3b3b3; } ``` 2、修改指定的input的placeholder ``` html: <input type="text" class="zd_input" placeholder="dddddd"> <textarea class="zd_textarea" placeholder="aaaaa"></textarea> css: input[class='zd_input']::-webkit-input-placeholder,textarea[class='zd_textarea']::-webkit-input-placeholder { color: #b3b3b3; } input[class='zd_input']:-moz-placeholder,textarea[class='zd_textarea']:-moz-placeholder{ color:#b3b3b3; } input[class='zd_input']::-moz-placeholder,textarea[class='zd_textarea']::-moz-placeholder{ color:#b3b3b3; } input[class='zd_input']:-ms-input-placeholder,textarea[class='zd_textarea']:-ms-input-placeholder{ color:#b3b3b3; } ``` ##### checkbox样式美化 样式根据自己的需求进行修改 ``` css: .checkbox { position: relative; height: 30px; } .checkbox input[type='checkbox'] { position: absolute; left: 0; top: 0; width: 20px; height: 20px; opacity: 0; } .checkbox label { position: absolute; left: 30px; top: 0; height: 20px; line-height: 20px; } .checkbox label:before { content: ''; position: absolute; left: -30px; top: 0; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .checkbox label:after { content: ''; position: absolute; left: -22px; top: 3px; width: 6px; height: 12px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .checkbox input[type='checkbox']:checked + label:before { background: #4cd764; border-color: #4cd764; } .checkbox input[type='checkbox']:checked + label:after { background: #4cd764; } html: <div class='checkbox'> <input type='checkbox' id='checkbox1' name='checkboox[]'> <label for='checkbox1'>篮球</label> </div> <div class='checkbox'> <input type='checkbox' id='checkbox2' name='checkboox[]'> <label for='checkbox2'>乒乓球</label> </div> <div class='checkbox'> <input type='checkbox' id='checkbox3' name='checkboox[]' checked> <label for='checkbox3'>足球</label> </div> ``` ##### banner图不拉伸,居中显示 <html> <head> <title>Title</title> <style> .bannerbox { width:100%; position:relative; overflow:hidden; height:500px; } .banner { width:1920px; /*图片宽度*/ position:absolute; left:50%; margin-left:-960px; /*图片宽度的一半*/ } </style> </head> <body> <div class="bannerbox"> <div class="banner"> <img src="t1.jpg"> </div> </div> </body> </html> ##### flex 左右排列 父元素: display: flex; justify-content: space-between; 需要那边固定宽度的: flex-shrink: 0; ##### flex 多行排列对齐 display: flex; justify-content: space-between; flex-wrap: wrap; //添加下面这个为元素的原因是防止最后一行,数据不够,没有对齐的问题,适合每行3-4列的 &:after{ display:block; content:""; width: 30%; height:0px; } 未完待续。。。 Tags: css javascript您觉得不错,可以分享到:关于本站凡本站注明"本站"或"投稿"的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。关于作者__construct幸福不会遗漏为之付出的人 上一篇文章css垂直居中的N中方法下一篇文章 兼容ios和安卓的复制相关文章js基础巩固css垂直居中的N中方法解决移动端Retina屏幕1px边框问题