在CSS3出現之前,想要實現圓角的效果可以透過圖片或用margin屬性實現,傳統的圓角生成方案,需要多張圖片作為背景圖案。 CSS3出現以後,就不需要浪費時間去製作多張圖片了,大大的減少了工作量,提高了網頁的效能,提升頁面載入速度,並且增加了視覺的可靠性。既然說了CSS3中的圓角有這麼多的優勢,那麼我們就來總結下css3圓角和圓角邊框使用方法。
#可以先學習《快速玩CSS3教學》中的 CSS3圓角介紹 章節課程
CSS3圓角及圓角邊框使用相關知識
自適應橢圓與圓角構造,#在css上建構圓形只需要將border- radius屬性值設為邊長的一半即可。這裡我們全面介紹一下border-radius的屬性,border-radius是一個簡寫屬性,它的展開式是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border- bottom-left-radius。它還有一個鮮為人知的特性:border-radius可以單獨指定水平和垂直半徑,只要用一個斜線( / )分隔這兩個值即可(圓形圓角水平和垂直半徑相等,可以合併) 。結合這這些特性來看的話,border-radius:50%;的詳細展開應該是border-radius:50% 50% 50% 50%/50% 50% 50% 50%。
學習重點如下:圓角border-radius;盒陰影box-shadow;邊界圖片border-image。 border-radius 屬性允許您為元素添加圓角邊框! border-image 屬性用來設定圖片的邊框。
#線性漸變:background:linear-gradient(設定漸變形式,第一個顏色起點,中間顏色點中間顏色的位置,結束點顏色); Linear:漸變的類型(線性漸變); 漸變的形式:可選參數有兩種方式-1、設定旋轉角度,0度代表水平從左到右,90度就是從上到下啦,從0度開始逆時針變換。
border-radius詳解
border-radius:50px; 上右下左,水平和垂直距離都是50px
border-radius:50%; 這裡的%號是已應用該css樣式元素的長度和寬度為基數的
border-radius:50% 30% ; 上下,水平垂直是50% 左右,水平垂直是30%
border-radius:50% 30% 10%; 上,水平垂直是50%,左右,水平垂直是30%,下,水平垂直是10%
border-radius:10% 50% 30% 10%; 上,水平垂直都是10%。右,平垂直都是50%。下,水平垂直都是30%。左,水平垂直都是10% /前面是水平的,/後面是垂直的
border-radius:50% / 30% ; 上左下右,水平是50%,垂直是30%
border-radius:50% / 30% 10%; 上右下左,水平都是50%,上下垂直30%,左右垂直10%;
5. CSS3圓角,陰影,透明
CSS3實作圓角有兩種方法.
第一種是背景圖像,傳統的CSS每個元素只能有一個背景圖像,但是CSS3可以允許一個元素有多個背景圖像.這樣給一個元素添加4個1/4圓的背景圖像,分別位於4個角上就可以實現圓角了.
第二種方法就簡潔了,直接用CSS實現,不需要用圖片.
6. css3圓角邊框製作方法
Firefox 和Safari 使用私有屬性實現圓角效果; 這個表示邊框內的底部圖片顏色; border: 1px solid #000;表示邊框的寬度,實心的,顏色是黑色的; border-top-left-radius: 55px 25px;表示左上角的邊框圓角效果,透過英文就可以辨識:top,left,修飾圓角的長度透過控制像素值來實現,55px表示橫向的長度,25px表示縱向的長度; 同理,border-bottom-right-radius: 55px 25px;右下角的圓角效果只要修改top為bottom就可以了; 使用css3來實現邊框圓角效果。
相關問答
3. css3圓角矩形問題
#【相關推薦】
1. php中文網免費影片教學:CSS3 最新影片教學
2. php中文網免費教學:CSS3最新基礎教學詳解
以上是css3圓角和圓角邊框使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!