前言：哈哈哈哈哈哈 每天都在搬砖，愿每天都能进步一点点！！！
1.修改input框中的placeholder的颜色 ------> 可用css3的伪类：：实现
.card li input::placeholder{color: red;}
<ul class="card">
<li>
<span>持卡人</span>
<input type="text" id="name" placeholder="请输入名字">
</li>
</ul>
2.给文字左右两边加“——” ：：：可用css3的background:linear-gradient() 实现
css部分：
.middleTitle{
text-align:center;
margin-bottom:15px;
display:flex;/*解决要是加上透明度会影响美观的bug*/
}
.middleName{
font-size:16px;
color:#1bbc9b;
padding:0px 5px;
}
.middleLine{
background:linear-gradient(transparent 49%,#ccc 49%,#ccc 53%,transparent 53%);
flex:1;/*解决要是加上透明度会影响美观的bug*/
}
html部分：
<p class="middleTitle">
<span class="middleLine"></span>
<span class="middleName">我是分割线中间的文字呀呀呀</span>
<span class="middleLine"></span>
</p>
效果如图：
3.css实现文字两端对齐
width: 22%;
display: inline-block;
text-align: justify;
text-align-last: justify;
4.css实现文字超出隐藏并以……代替
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
5.当需要文字不超过3行，并以……代替时 可用 -webkit-line-clamp等属性
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3; //文字显示3行
display: -webkit-box;
-webkit-box-orient: block-axis;
以上属性 缺一不可 ~~~
6.给标签添加 contenteditable="true" 后标签会变成编辑框
想要取消可输入标签聚焦时contenteditable的边框，可加样式：outline:none;
