一殴胧、設(shè)置input相關(guān)樣式
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="請?jiān)O(shè)置用戶名">
2戳鹅、設(shè)置input聚焦時(shí)的樣式
input:focus {
border: red 1px solid;
}
3、取消input的默認(rèn)樣式
background:none;
border:none;
outline:none;
// 去掉ios的input的默認(rèn)樣式
-webkit-appearance:none;
// 去掉點(diǎn)擊陰影
-webkit-tap-highlight-color:rgba(255,255,255,0);
// 去掉chrome表單自動(dòng)填充后的黃色底色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 100px white inset;
}
二昏兆、單行和多行文本超出省略號(hào)
<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; /*重點(diǎn)枫虏，不能用block等其他，將對(duì)象作為彈性伸縮盒子模型顯示*/
-webkit-box-orient: vertical; /*從上到下垂直排列子元素（設(shè)置伸縮盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行數(shù)爬虱，超出三行隱藏且多余的用省略號(hào)表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
}
</style>
<div class="container">
<p class="single">
<span class="c-red">單行溢出：</span>笑你我枉花光心計(jì) 愛競逐鏡花那美麗 怕幸運(yùn)會(huì)轉(zhuǎn)眼遠(yuǎn)逝 為貪嗔喜惡怒著迷 責(zé)你我太貪功戀勢 怪大地眾生太美麗 悔舊日太執(zhí)信約誓 為悲歡哀怨妒著迷
</p>
<p class="mutiple">
<span class="c-red">多行溢出：</span>笑你我枉花光心計(jì) 愛競逐鏡花那美麗 怕幸運(yùn)會(huì)轉(zhuǎn)眼遠(yuǎn)逝 為貪嗔喜惡怒著迷 責(zé)你我太貪功戀勢 怪大地眾生太美麗 悔舊日太執(zhí)信約誓 為悲歡哀怨妒著迷 啊 舍不得璀璨俗世 啊 躲不開癡戀的欣慰 啊 找不到色相代替 啊 參一生參不透這條難題 吞風(fēng)吻雨葬落日未曾彷徨 欺山趕海踐雪徑也未絕望 拈花把酒偏折煞世人情狂 憑這兩眼與百臂或千手不能防 天闊闊雪漫漫共誰同航 這沙滾滾水皺皺笑著浪蕩 貪歡一晌偏教那女兒情長埋葬
</p>
</div>
三模软、負(fù)邊距使用技巧
在static元素中使用負(fù)邊距:
1、當(dāng)一個(gè)static元素在top/left使用負(fù)邊距時(shí)饮潦，它把元素向這個(gè)特定的方向拉
2、但是當(dāng)你將負(fù)邊距設(shè)置為相對(duì)bottom/right時(shí)携狭，它并不會(huì)把元素向下或右拉继蜡，相反，它會(huì)把后面的元素往里面拉逛腿，從而覆蓋自己稀并。
如果對(duì)一個(gè)浮動(dòng)的元素使用負(fù)邊距，它會(huì)產(chǎn)生一個(gè)空白单默，其他元素就可以覆蓋這一部分碘举。
比如：
有一列寬度100%，另一列有固定的寬度搁廓，比如說100px引颈。
如果兩個(gè)元素都使用了左浮動(dòng)并且設(shè)置margin-right:-20px耕皮。#mydiv2會(huì)把#mydiv1看成寬度縮小20px（所以會(huì)覆蓋一部分），但是有趣的是#mydiv1并不會(huì)有任何變化蝙场，而是依然保持原先的寬度凌停。
如果負(fù)邊距和寬度一樣大的話，它就會(huì)被完全覆蓋掉售滤。如果負(fù)外邊距等于元素的寬度的話罚拟，那么該元素的寬度就會(huì)變成0。
<style>
*{
margin:0;
padding:0;
}
.wrap{
/* 利用負(fù)值技巧進(jìn)行整體移動(dòng) */
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>
四完箩、定位同時(shí)設(shè)置方位情況
絕對(duì)定位和固定定位時(shí)赐俗，同時(shí)設(shè)置 left 和 right 等同于隱式地設(shè)置寬度
<style>
span{
border:1px solid red;
position: absolute;
left:0;
right:0;
</style>
/* 等同于設(shè)置 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是不占空間的阻逮，不會(huì)增加額外的寬度或高度；而border會(huì)吉捶。
<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>
七夺鲜、隱藏滾動(dòng)條或更改滾動(dòng)條樣式
<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,
/* 滾動(dòng)條角落 */
.scroll-container::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track { /*滾動(dòng)條的軌道*/
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-track {
/* 滾動(dòng)條軌道 */
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 {
/* 滾動(dòng)條手柄 */
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">臨濟(jì)論自我：與此時(shí)币励，在目前，孤獨(dú)珊拼、明徹食呻，以充分覺知，聽此說法者澎现。</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>優(yōu)惠券
</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>
