##### 边框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：

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;
             }

未完待续。。。

工作中常用的样式和方法

关于本站

关于作者

__construct

评论区

发表评论

工作中常用的样式和方法

关于本站

关于作者

相关文章

评论区

发表评论