首頁 > web前端 > css教學 > 主體

css3圓角和圓角邊框使用方法總結

伊谢尔伦
發布: 2017-06-05 11:06:57
原創
4030 人瀏覽過

在CSS3出現之前,想要實現圓角的效果可以透過圖片或用margin屬性實現,傳統的圓角生成方案,需要多張圖片作為背景圖案。 CSS3出現以後,就不需要浪費時間去製作多張圖片了,大大的減少了工作量,提高了網頁的效能,提升頁面載入速度,並且增加了視覺的可靠性。既然說了CSS3中的圓角有這麼多的優勢,那麼我們就來總結下css3圓角和圓角邊框使用方法。


#可以先學習《快速玩CSS3教學》中的 CSS3圓角介紹 章節課程

css3圓角和圓角邊框使用方法總結

CSS3圓角及圓角邊框使用相關知識

1.  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%。

2. CSS3圓角邊框與邊界圖片效果實例分享

學習重點如下:圓角border-radius;盒陰影box-shadow;邊界圖片border-image。 border-radius 屬性允許您為元素添加圓角邊框! border-image 屬性用來設定圖片的邊框。

3. 分享一篇CSS3圓角和漸變功能的實例代碼

#線性漸變:background:linear-gradient(設定漸變形式,第一個顏色起點,中間顏色點中間顏色的位置,結束點顏色); Linear:漸變的類型(線性漸變); 漸變的形式:可選參數有兩種方式-1、設定旋轉角度,0度代表水平從左到右,90度就是從上到下啦,從0度開始逆時針變換。

4. CSS3圓角邊框的使用-遁地龍捲風

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來實現邊框圓角效果。

相關問答

1. css3圓角border-radius製作尖角。

2. 微信瀏覽器 css3圓角問題

3. css3圓角矩形問題

#【相關推薦】

1. php中文網免費影片教學:CSS3 最新影片教學

2. php中文網免費教學:CSS3最新基礎教學詳解



#

以上是css3圓角和圓角邊框使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!