css如何實(shí)現(xiàn)用戶界面樣式

發(fā)布時(shí)間：2022-03-07 14:20:00 來(lái)源：億速云閱讀：157 作者：小新欄目：云計(jì)算

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)用戶界面樣式，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

用戶界面樣式

1）鼠標(biāo)樣式(cursor)

設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

cursor :  default  小白 | pointer  小手  | move  移動(dòng)  |  text  文本

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    default  小白 | pointer  小手  | move  移動(dòng)  |  text  文本    <ul>        <li style="cursor: default">碼海無(wú)際</li>        <li style="cursor: pointer">碼海無(wú)際</li>        <li style="cursor: move">碼海無(wú)際</li>        <li style="cursor: text">碼海無(wú)際</li>    </ul></body></html>

css如何實(shí)現(xiàn)用戶界面樣式

2）輪廓(outline)

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            width: 80px;            border: 3px solid red;            outline: blue dotted 5px;        }</style></head><body>    <div>碼海無(wú)際</div></body></html>

css如何實(shí)現(xiàn)用戶界面樣式

3）防止拖拽文本域(resize)

resize：none 這個(gè)單詞可以防止火狐谷歌等瀏覽器隨意的拖動(dòng) 文本域。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <textarea></textarea>    <textarea style="resize: none"></textarea></body></html>

css如何實(shí)現(xiàn)用戶界面樣式

關(guān)于“css如何實(shí)現(xiàn)用戶界面樣式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

css如何實(shí)現(xiàn)用戶界面樣式

用戶界面樣式

1）鼠標(biāo)樣式(cursor)

2）輪廓(outline)

3）防止拖拽文本域(resize)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽