css3圓角邊框和邊框陰影示例
發(fā)布時(shí)間：2014-05-05 15:44:58 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css3圓角邊框和邊框陰影示例,需要的朋友可以參考下
border-radius向元素添加圓角邊框，css3中的。IE9+ chrome safari5+ firefox4+ 現(xiàn)在都支持?？梢韵騣nput div等設(shè)置邊框。與border相似，可以四個(gè)角一起設(shè)置，也可以單獨(dú)設(shè)置。
語法：
復(fù)制代碼
代碼如下: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è)置每個(gè) radius 的值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。
例子1:
復(fù)制代碼
代碼如下:border-radius:2px;
等價(jià)于：
復(fù)制代碼
代碼如下:border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
例子2:
復(fù)制代碼
代碼如下:border-radius:2em 1em 4em / 0.5em 3em;
等價(jià)于：
復(fù)制代碼
代碼如下: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向框添加一個(gè)或多個(gè)陰影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。
語法：
復(fù)制代碼
代碼如下:box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內(nèi)部陰影。
例子：
復(fù)制代碼
代碼如下:box-shadow: inset 3px 3px 6px #ccc;
相關(guān)文章
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角，并附上示例代碼，推薦給有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圓角border-radius等屬性的解決方案
IE系列瀏覽器不支持CSS的圓角(border-radius)等CSS3屬性，如何解決這個(gè)問題呢？百度了一下，發(fā)現(xiàn)有個(gè)開源的插件可以解決此問題2014-09-15CSS3實(shí)現(xiàn)圓角、陰影、透明效果并兼容各大瀏覽器
圓角、陰影、透明的實(shí)現(xiàn)方法有很多，之前的獲取比較復(fù)雜，用CSS3就方便很多了，而且對(duì)瀏覽器的支持性也比較好，下面簡(jiǎn)單為大家介紹下2014-08-08純CSS3實(shí)現(xiàn)圓角效果（含IE兼容解決方法）
CSS3圓角技術(shù)能非常好的美化你的頁面效果，而且避免了使用圖片輔助，一則省去了制作圖片的時(shí)間，二則省去了瀏覽器加載圖片造成的延遲和帶寬2014-05-07- css3自定義漸變圓角按鈕樣式分享，大家參考使用吧2013-12-27
jQuery+css3實(shí)現(xiàn)的超酷無圖片圓角tab選項(xiàng)卡切換效果
依靠CSS3實(shí)現(xiàn)了Tab選項(xiàng)卡標(biāo)簽的圓角效果，無需圖片2013-09-10
純CSS3實(shí)現(xiàn)的圓角彩色多功能超酷導(dǎo)航菜單效果
無需任何JS代碼就可以實(shí)現(xiàn)圓角彩色的多功能導(dǎo)航按鈕，簡(jiǎn)潔大方2013-08-26
純CSS3實(shí)現(xiàn)的紫色性感華麗帶有圓角效果的登錄表單效果
無需任何JS，表單界面豪華靚麗，帶有圓角效果，輸入框也非常高雅2013-07-24
CSS3通過樣式定義制作的50個(gè)圓角漸變效果的網(wǎng)頁按鈕
無需任何圖片和JS代碼，完全通過樣式定義即可實(shí)現(xiàn)如此漂亮的圓角按鈕，每一個(gè)按鈕都各有特點(diǎn)2013-07-24
圓角邊框的繪制是Web頁面和Web應(yīng)用程序中經(jīng)常用來美化頁面效果的手法之一。今天，小編為大家介紹CSS3提供的可以將矩形變?yōu)閳A角矩形的一個(gè)屬性，需要的朋友參考下吧2017-11-09
