/*單行文本超出省略*/
.aui-ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*兩行文本超出省略*/
.aui-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*水平線*/
.aui-hr {
width: 100%;
position: relative;
border-top: 1px solid #dddddd;
height: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
.aui-hr{
border: none;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd
50%,transparent 50%);
}
}
/*單選、多選、開(kāi)關(guān)*/
.aui-radio,
.aui-checkbox {
width: 1.2rem;
height: 1.2rem;
background-color: #ffffff;
border: solid 1px #dddddd;
-webkit-border-radius: 0.6rem;
border-radius: 0.6rem;
font-size: 0.8rem;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
vertical-align: top;
cursor: default;
-webkit-appearance: none;
-webkit-user-select: none;
user-select: none;
-webkit-transition: background-color ease 0.1s;
transition: background-color ease 0.1s;
}
.aui-checkbox {
border-radius: 0.1rem;
}
.aui-radio:checked,
.aui-radio.aui-checked,
.aui-checkbox:checked,
.aui-checkbox.aui-checked {
background-color: #03a9f4;
border: solid 1px #03a9f4;
text-align: center;
background-clip: padding-box;
}
.aui-radio:checked:before,
.aui-radio.aui-checked:before,
.aui-checkbox:checked:before,
.aui-checkbox.aui-checked:before,
.aui-radio:checked:after,
.aui-radio.aui-checked:after,
.aui-checkbox:checked:after,
.aui-checkbox.aui-checked:after {
content: '';
width: 0.5rem;
height: 0.3rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.25rem;
margin-top: -0.25rem;
background: transparent;
border: 1px solid #ffffff;
border-top: none;
border-right: none;
z-index: 2;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.aui-radio:disabled,
.aui-radio.aui-disabled,
.aui-checkbox:disabled,
.aui-checkbox.aui-disabled {
background-color: #dddddd;
border: solid 1px #dddddd;
}
.aui-radio:disabled:before,
.aui-radio.aui-disabled:before,
.aui-radio:disabled:after,
.aui-radio.aui-disabled:after,
.aui-checkbox:disabled:before,
.aui-checkbox.aui-disabled:before,
.aui-checkbox:disabled:after,
.aui-checkbox.aui-disabled:after {
content: '';
width: 0.5rem;
height: 0.3rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.25rem;
margin-top: -0.25rem;
background: transparent;
border: 1px solid #ffffff;
border-top: none;
border-right: none;
z-index: 2;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.aui-switch {
width: 2.3rem;
height: 1.2rem;
position: relative;
vertical-align: top;
border: 1px solid #dddddd;
background-color: #dddddd;
border-radius: 0.6rem;
background-clip: content-box;
display: inline-block;
outline: none;
-webkit-appearance: none;
appearance: none;
-webkit-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.aui-switch:before {
width: 1.1rem;
height: 1.1rem;
position: absolute;
top: 0;
left: 0;
border-radius: 0.6rem;
background-color: #fff;
content: '';
-webkit-transition: left 0.2s;
transition: left 0.2s;
}
.aui-switch:checked {
border-color: #03a9f4;
background-color: #03a9f4;
}
.aui-switch:checked:before {
left: 1.1rem;
}
常用樣式
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
- 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
- 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- html 與 css 的含義 html語(yǔ)法結(jié)構(gòu) 常用標(biāo)簽 css修飾語(yǔ)法 css常用樣式 常用選擇器以級(jí)優(yōu)先級(jí)
- 自我介紹應(yīng)該是80%的面試都會(huì)遇到的問(wèn)題。 那么,作為面試官的我們究竟想聽(tīng)到那些內(nèi)容呢? 自我介紹需要怎樣的內(nèi)容呢...