一、设置input相干款式
1、input的placeholder的款式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder { /* Firefox 18- */ color: red;} <input type="text" placeholder="请设置用户名">
2、设置input聚焦时的款式
input:focus { border: red 1px solid;}
3、勾销input的默认款式
background:none;border:none;outline:none;// 去掉ios的input的默认款式-webkit-appearance:none;// 去掉点击暗影-webkit-tap-highlight-color:rgba(255,255,255,0);// 去掉chrome表单主动填充后的黄色底色input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 100px white inset;}
二、单行和多行文本超出省略号
<style>.container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555;}.c-red { color: #8968CD;}p { background-color: #ccccff; padding: 2px 5px;}/*单行*/.single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}/*多行*/.mutiple { display: -webkit-box; /*重点，不能用block等其余，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）*/ -webkit-line-clamp: 3; /*行数，超出三行暗藏且多余的用省略号示意...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%;}</style><div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>笑你我枉花光心计 爱竞逐镜花那漂亮 怕侥幸会转瞬远逝 为贪嗔喜恶怒着迷 责你我太贪功恋势 怪大地众生太美丽 悔旧日太执信约誓 为悲欢哀怨妒着迷 </p> <p class="mutiple"> <span class="c-red">多行溢出：</span>笑你我枉花光心计 爱竞逐镜花那漂亮 怕侥幸会转瞬远逝 为贪嗔喜恶怒着迷 责你我太贪功恋势 怪大地众生太美丽 悔旧日太执信约誓 为悲欢哀怨妒着迷 啊 舍不得璀璨俗世 啊 躲不开痴恋的快慰 啊 找不到色相代替 啊 参毕生参不透这条难题 吞风吻雨葬落日未曾徘徊 欺山赶海践雪径也未失望 拈花把酒偏折煞世人情狂 凭这两眼与百臂或千手不能防 天阔阔雪漫漫共谁同航 这沙滚滚水皱皱笑着浪荡 贪欢一晌偏教那女儿情长掩埋 </p></div>
三、负边距应用技巧
在static元素中应用负边距:
1、当一个static元素在top/left应用负边距时，它把元素向这个特定的方向拉
2、然而当你将负边距设置为绝对bottom/right时，它并不会把元素向下或右拉，相同，它会把前面的元素往里面拉，从而笼罩本人。
如果对一个浮动的元素应用负边距，它会产生一个空白，其余元素就能够笼罩这一部分。
比方：
有一列宽度100%，另一列有固定的宽度，比如说100px。
如果两个元素都应用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度放大20px（所以会笼罩一部分），然而乏味的是#mydiv1并不会有任何变动，而是仍然放弃原先的宽度。
如果负边距和宽度一样大的话，它就会被齐全笼罩掉。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0。
<style>*{ margin:0; padding:0;}.wrap{ /* 利用负值技巧进行整体挪动 */ margin-left:-6px;}.item{ float:left; width: 20%; height: 300px; border-left:6px solid #fff; box-sizing: border-box;}</style><div class="wrap"> <div class="item" style="background-color: #FFBBFF;"></div> <div class="item" style="background-color: #BFEFFF;"></div> <div class="item" style="background-color: #DDA0DD;"></div> <div class="item" style="background-color: #BCEE68;"></div> <div class="item" style="background-color: #FF8C00;"></div></div>
四、定位同时设置方位状况
相对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度
<style>span{ border:1px solid red; position: absolute; left:0; right:0;</style> /* 等同于设置 width:100%;display:block */}<span>1</span>
五、相邻兄弟选择器罕用场景
<style>ul{ width: 500px; margin: 100px auto; list-style: none; padding:0; border:1px solid #DDA0DD; text-align: center; color:#333; }li+li{ border-top:1px solid #FF8C00;}</style><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>
六、outline属性的妙用技巧
outline是不占空间的，不会减少额定的宽度或高度；而border会。
<style>ul { list-style: none; width: 600px; margin: 100px auto;}li { padding: 10px; border: 10px solid pink; outline-offset: -10px;}li+li{ margin-top:-10px;}li:hover{ border:10px solid gold; // outline:10px solid gold;}</style><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>
七、暗藏滚动条或更改滚动条款式
<style> .scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px; background: white; } .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */ .scroll-container::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/ border-radius: 4px; } .scroll-container::-webkit-scrollbar-corner, .scroll-container::-webkit-scrollbar-track { /* 滚动条轨道 */ background-color: rgba(180, 160, 120, 0.1); box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } .scroll-container::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color: #00adb5; }</style>
八、 CSS绘制三角形
<style>/* 正三角 */.up-triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent;}/* 倒三角 */.down-triangle { width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent;}div:last-child { margin-top: 1rem;}</style>
九、虚线框绘制技巧
<style>.dotted-line { width: 800px; margin: auto; padding: 20px; border: 1px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em); //border: 1px dashed #f00;}</style><div class="dotted-line">临济论自我：与此时，在目前，孤单、明彻，以充沛觉知，听此说法者。</div>
十、卡券成果
<style>.coupon { width: 300px; height: 100px; line-height: 100px; margin: 50px auto; text-align: center; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.coupon span { display: inline-block; vertical-align: middle; margin-right: 10px; color: red; font-size: 50px; font-weight: 400;}<p class="coupon"> <span>200</span>优惠券</p></style>
十一、 暗藏文本的罕用两种办法
text-indent: -9999px; // font-size: 0;
十二、表格边框合并
<style>table{ border-collapse: collapse;}</style><table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> </tr> </tbody></table>