一.css中抬頭
::-moz-代表firefox瀏覽器私有屬性::-ms-代表ie瀏覽器私有屬性::-webkit-代表safari、chrome私有屬性::-o-代表opera
二.常見的中私有屬性拿chrome瀏覽器舉例
::如果前面為空代碼全域,如果前面有某個元素的css選擇器代表改元素的對于內容
1.輸入框
::-webkit-input-placeholder {}
//阻止input出現黃色背景
input:-webkit-autofill {
background-color: #fff !important;
-webkit-box-shadow: inset 0 0 0 1000px white !important;
}
清除input[type=”number”]側邊的箭頭
input::-webkit-inner-spin-button { -webkit-appearance: none; }
2.禁用選擇文本
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
3.selection (下拉框)
::selection
{
xxxxx
}
::-moz-selection
{
xxxx
}
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器，
Firefox 支持替代的 ::-moz-selection，
4.滾動條
::-webkit-scrollbar{} //滾動條寬度
::-webkit-scrollbar-thumb {} //滑軌上滑塊
::-webkit-scrollbar-button {} //滑軌兩頭的監聽按鈕顏色
::-webkit-scrollbar-track {} //定義滾動條軌道
-webkit-overflow-scrolling: touch; //允許獨立的滾動區域和觸摸回彈
//影藏滾動條
::-webkit-scrollbar {
width: 0px;
}
//舉例
/*定義滾動條樣式*//*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
height: 0.01rem;
background-color: #fff;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
border-radius: 0.1rem;
background-color: #fff;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 0.1rem;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #fff;
}
5.input-range
::-webkit-slider-thumb{} //一定要配合::-webkit-slider-runnable-track使用,否則會沒有效果.......
里面引數和滑動塊類似
6.字體描邊
-webkit-text-strokeCSS屬性為文本字符指定了寬 和 顏色 . 它是-webkit-text-stroke-width和-webkit-text-stroke-color屬性的縮寫.
/* 全域設定 */
/* 寬度和顏色屬性 */
-webkit-text-stroke: <length> <color>;
-webkit-text-stroke-width：絕對<length>
-webkit-text-stroke-color：<color>
-webkit-text-stroke: 1px red;
/* 全域屬性 */
/* 默認設定 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
/* 區域設定 */
div {
-webkit-text-stroke: <length> <color>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108267.html
標籤：Html/Css
上一篇：<h1>~<h6> 標題標簽
下一篇：案例——文字折疊效果