您好,登錄后才能下訂單哦!
這篇文章主要講解了“css3如何實現(xiàn)圓角邊框和邊框陰影”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“css3如何實現(xiàn)圓角邊框和邊框陰影”吧!
border-radius向元素添加圓角邊框,css3中的。IE9+ chrome safari5+ firefox4+ 現(xiàn)在都支持??梢韵騣nput div等設(shè)置邊框。與border相似,可以四個角一起設(shè)置,也可以單獨設(shè)置。
語法:
border-radius: 1-4 length|% / 1-4 length|%; -moz-border-radius:10px;支持舊的firefox -webkit-border-radius:10px;支持chrome
按top-left, top-right, bottom-right, bottom-left順序設(shè)置每個 radius 的值。如果省略 bottom-left,則與 top-right 相同。如果省略 bottom-right,則與 top-left 相同。如果省略 top-right,則與 top-left 相同。
例子1:
border-radius:2px;
等價于:
border-top-left-radius:2px; border-top-right-radius:2px; border-bottom-right-radius:2px; border-bottom-left-radius:2px;
例子2:
border-radius:2em 1em 4em / 0.5em 3em;
等價于:
border-top-left-radius:2em 0.5; border-top-right-radius:1em 3em; border-bottom-right-radius:4em 0.5em; border-bottom-left-radius:1em 3em;
box-shadow向框添加一個或多個陰影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必須。水平,垂直陰影的位置。允許賦值。blur可選,模糊距離。spread可選,陰影的尺寸。color可選,陰影的顏色。inset可選,將外部陰影(outset)改為內(nèi)部陰影。
例子:
box-shadow: inset 3px 3px 6px #ccc;
css的基本語法是:
1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成;
2、選擇器通常是需要改變樣式的HTML元素;
3、每條聲明由一個屬性和一個值組成;
4、屬性和屬性值被冒號分隔開。
感謝各位的閱讀,以上就是“css3如何實現(xiàn)圓角邊框和邊框陰影”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對css3如何實現(xiàn)圓角邊框和邊框陰影這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。