<form id="ddd9p"><nobr id="ddd9p"></nobr></form>

          <address id="ddd9p"></address>

          當前位置: 沐風博客 >> 網頁設計 >>正文

          css圓角邊框怎么設置

          重點導讀:設置css圓角邊框就是設置border-radius的值,設置的數字不同,圓角的大小也不同。通過設計css圓角邊框,我們就不需要再用帶框的背景圖片,這不僅讓頁面設計更加簡單,同時也有利于提升頁面加載的速度。

          css+div是頁面設計的法寶,通過css+div能夠設計出各種效果!本文給大家簡單介紹下css圓角邊框怎么設置,大家可以參考,也可以直接拿過去使用,當然要修改下具體的參數。

          border-radius 屬性可以接受一到四個值。規則如下:

          圓角邊框(border-radius)的基本用法:border-radius 屬性是一個簡寫屬性,用于設置四個圓角的屬性。

          圓角邊框的最基本用法就是設置四個相同弧度的圓角。

          四個值 - border-radius: 15px 50px 30px 5px;(依次分別用于:左上角、右上角、右下角、左下角):

          三個值 - border-radius: 15px 50px 30px;(第一個值用于左上角,第二個值用于右上角和左下角,第三個用于右下角):

          兩個值 - border-radius: 15px 50px;(第一個值用于左上角和右下角,第二個值用于右上角和左下角):

          一個值 - border-radius: 15px;(該值用于所有四個角,圓角都是一樣的):

          以下是css圓角邊框具體的代碼實例:

          #rcorners1 {

            border-radius: 15px 50px 30px 5px;

            background: #73AD21;

            padding: 20px; 

            width: 200px;

            height: 150px; 

          }

          上面的css代碼,大家可以直接拿去用,至于像15px、50px等這些數據,大家可以通過測試看看具體需要多大數字,這里給出的數字只是參考。

          現在大家應該知道css圓角邊框怎么設置了吧!總結起來很簡單,設置css圓角邊框就是設置border-radius的值,設置的數字不同,圓角的大小也不同。通過設計css圓角邊框,我們就不需要再用帶框的背景圖片,這不僅讓頁面設計更加簡單,同時也有利于提升頁面加載的速度。


          本文 已幫助 794 人!

          沐風博客

          本站內容大部分由沐風博客原創,少部分內容來源于網絡,如有侵權請與我們聯系,我們會及時刪除!
          責任編輯:沐風 | 發布時間:2022年02月18日09點08分21秒 | 本文永久地址為 http://www.aywdesigns.com/seo/3282.html

          發表評論:

          ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

          沐風博客,更新包含SEO培訓教程、網站運營及網絡推廣等互聯網資訊

          線下SEO培訓地址:廣州.廈滘 | 線上SEO培訓不受地域限制

          人人妻人人A爽人人模夜夜

          <form id="ddd9p"><nobr id="ddd9p"></nobr></form>

                  <address id="ddd9p"></address>