今天要跟大家介紹的是border-radius，如何使用border-radius，以及border-radius的屬性。下面我們來看一個小案例。
DIVCSS3圓角單字：border-radius
語法結構
p{border-radius:5px}
設定DIV物件盒子四個角落5像素圓角效果
p{border-radius:5px 0;}
設定DIV物件盒子左上角和右下角5px圓角，其它兩個角為0不圓角
p{border-radius:5px 5px 0 0;}
設定DIV物件盒子左上角和右上角5px圓角，其它兩個角為0不圓角
說明：
border-radius:3px 4px 5px 6px
代表設定物件左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。
CSS3圓角案例
分別對兩個DIV盒子設定圓角、一個圖片設定圓角實作CSS3圓角。
案例HTML程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>盒子左上角和右上角对象圆角测试</p> <p class="box">DIV盒子圆角</p> <p>盒子对象个角圆角测试</p> <p class="box3">DIV盒子圆角</p> <p> </p> <p>图片对象圆角测试</p> <p class="box2"><img src="/static/imghwm/default1.png" data-src="images/logo.gif" class="lazy" / alt="CSS裡怎麼使用border-radius" ></p> </body> </html>
案例CSS程式碼：
.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto}
.box2 img{border-radius:5px}
.box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}案例說明
1）、第一個BOX盒子為了觀察到圓角效果所以設定了邊框樣式，同時設定圓角樣式border-radius:5px 5px 0 0;設定左上角和右上角圓角。
2）、第二個BOX3盒子設定背景色，同時設定圓角樣式border-radius:5px 0，設定左上角和右下角圓角
3）、第三個對box2盒子裡圖片img設定圓角樣式border-radius:5px，設定四個角均圓角。
關於border-radius的知識就這麼多，有興趣的朋友可以自己動手操作一下，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是CSS裡怎麼使用border-radius的詳細內容。更多資訊請關注PHP中文網其他相關文章！
我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PMGoofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google
使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的
將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
SublimeText3漢化版
中文版，非常好用
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
