建站
咨詢
售后
建站咨詢
新聞中心
修改輸入占位符樣式、多行文本溢出、隱藏滾動條、修改光標(biāo)顏色、水平和垂直居中。多么熟悉的場景??！前端開發(fā)人員幾乎每天都會與它們打交道。本文收集了13個CSS技巧，我們一起來回顧一下。
目前創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、港南網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1.解決圖片5px間距問題
5px ，你是否經(jīng)常遇到圖片底部多余空間的問題？別擔(dān)心，有4種方法可以解決。
方案一：更改其父元素的font-size：0px
方案二：增加img display:block的樣式
方案三：增加img的樣式vertical-align:bottom
方案四：增加父元素的樣式line-height:5px
2.如何讓元素高度與窗口相同
目前的前端中，CSS有一個單位vh，將元素高度樣式設(shè)置為height:100vh
3.修改輸入框占位符樣式
這是表單輸入框的占位符屬性。修改默認(rèn)樣式的方法如下：
input::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}4. 使用 :not 選擇器
除了最后一個元素之外的所有元素都需要一些樣式，而使用選擇器實現(xiàn)這一點并不容易。
例如，要實現(xiàn)列表，最后一個元素不需要加下劃線，如下所示：
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}5.使用caret-color修改光標(biāo)顏色
有時需要修改光標(biāo)的顏色。現(xiàn)在是插入符號顏色時間。
.caret-color {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
outline: none;
color: #ffd476;
font-size: 14px;
/* Key style */
caret-color: #ffd476;
}
.caret-color::-webkit-input-placeholder {
color: #4f4c5f;
font-size: 14px;
}6.使用flex布局智能地將元素固定到底部
當(dāng)內(nèi)容不夠時，按鈕應(yīng)該位于頁面底部。當(dāng)內(nèi)容足夠多時，按鈕應(yīng)該跟隨內(nèi)容。當(dāng)你遇到類似的問題時，可以使用flex智能布局！
Content here
CSS代碼如下：
.container {
height: 100vh;
/* Key style */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
/* Key style */
flex: 1;
background-image: linear-gradient(
45deg,
#ff9a9e 0%,
#fad0c4 99%,
#fad0c4 100%
);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer {
padding: 15px 0;
text-align: center;
color: #ff9a9e;
font-size: 14px;
}7.去掉type="number"末尾的箭頭
默認(rèn)情況下，type="number" 輸入類型末尾會出現(xiàn)一個小箭頭，但有時需要將其刪除。你可以使用以下樣式：
input {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
outline: none;
color: #ffd476;
font-size: 14px;
caret-color: #ffd476;
display: block;
}
input::-webkit-input-placeholder {
color: #4f4c5f;
font-size: 14px;
}
/* Key style */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}8.使用outline:none刪除輸入狀態(tài)行
當(dāng)輸入框被選中時，默認(rèn)會有一條藍(lán)色的狀態(tài)行，可以使用outline:none去掉。
9.解決iOS滾動條卡住的問題
在蘋果手機(jī)上，滾動時元素經(jīng)常會卡住。此時只有一行CSS會支持彈性滾動。
body,html{
-webkit-overflow-scrolling: touch;
}10.畫一個三角形
.triangle {
display: inline-block;
margin-right: 10px;
/* Basic style */
border: solid 10px transparent;
}
/* downward triangle */
.triangle.bottom {
border-top-color: #0097a7;
}
/* Upward triangle */
.triangle.top {
border-bottom-color: #b2ebf2;
}
/* Leftward triangle */
.triangle.left {
border-right-color: #00bcd4;
}
/* Right triangle */
.triangle.right {
border-left-color: #009688;
}11.自定義選定的文本樣式
文本選擇的顏色和樣式可以通過styles自定義。關(guān)鍵樣式如下：
::selection {
color: #ffffff;
background-color: #ff4c9f;
}12. 不允許選擇文本
使用用戶選擇的樣式：none；
13. 使用filter:grayscale(1)將頁面置于灰度模式
一行代碼會將頁面置于灰色模式。
body{
filter: grayscale(1);
}總結(jié)
以上就是我今天想與你分享的13個關(guān)于CSS的技巧，希望這些技巧對你有用。
本文標(biāo)題：13 種可能對前端有用的 CSS 技術(shù)
分享地址：http://www.5511xx.com/article/djgjdch.html
