css颜色表_那些常用却又常忘记的css样式

1. input中的placeholder

首先我们定义一个input：

    12

当我们使用输入框input中的placeholder时经常需要调里面字体的大小和其他样式，(由于兼容性问题，对应浏览器不同，所以要针对浏览器用不同的代码。)这时就需要用到如下代码：

input::-webkit-input-placeholder {        /*谷歌*/        color: red;      }      input:-ms-input-placeholder {        /* IE 10+ */        color: black;      }      input::-moz-placeholder {        /*火狐 19+ */        color: pink;      }      input:-moz-placeholder {        /*火狐 18-*/        color: yellow;      }12345678910111213141516

(简单用谷歌来实现一下，效果如下图：)

2.单行多行文本加省略号

在做一些纯css页面时 偶尔要用到文本加省略号，特别是多行文本居中，很容易忘记里面一些代码

/* 单行文本加省略号 */      .text {        /* 注意定宽 */        width: 300px;        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;        letter-spacing: 8px;      }      /*多行文本加省略号  */      .texts {        overflow: hidden;        display: -webkit-box;        -webkit-line-clamp: 2;        -webkit-box-orient: vertical;        text-overflow: ellipsis;      }123456789101112131415161718

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

3.做一个三角形

做一些下拉框或者列表的时候 做一个小三角就会用到了，不用设置宽高，利用边框宽度，只需要留下一个边框的颜色，其他边框设置成transparent即可

/* css做一个三角形 */      .trangle {        width: 0;        height: 0;        border: 20px solid red;        border-color: transparent transparent red transparent;       }1234567

4.绝对定位后使其居中

注意要使用transform: translate(-50%, -50%); 来让它以中心点平移，当然你也可以使用margin来调节。
另外其他方法居中也有很多种，高等与行高来垂直居中等其他方法(由于常用就不列举了)

.center {        width: 200px;        height: 200px;        position: absolute;        left: 50%;        top: 50%;        transform: translate(-50%, -50%);        background-color: pink;        text-align: center;      }12345678910

5.去除重复边框

首先要在大表格(最外面表)中写下面的代码：

table {        border-collapse: collapse;      }123

然后再设置tr。th。td的边框就没问题了。

原文链接：https://blog.csdn.net/hxp2288665/article/details/108836684?utm_medium=distribute.pc_category.none-task-blog-hot-18.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-18.nonecase&request_id=