這篇文章主要介紹了css如何設置4個圓角,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
成都創新互聯公司擁有十多年成都網站建設工作經驗,為各大企業提供成都網站建設、成都網站制作服務,對于網頁設計、PC網站建設(電腦版網站建設)、重慶APP開發公司、wap網站建設(手機版網站建設)、程序開發、網站優化(SEO優化)、微網站、域名注冊等,憑借多年來在互聯網的打拼,我們在互聯網網站建設行業積累了很多網站制作、網站設計、網絡營銷經驗,集策劃、開發、設計、營銷、管理等網站化運作于一體,具備承接各種規模類型的網站建設項目的能力。
CSS3圓角用于通過使用border-radius屬性為主體或文本添加特殊顏色的角。圓角的簡單語法如下:
#rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }
下表顯示了圓角的可能值,如下所示:
例,此屬性可以有三個值。以下示例使用兩個值 :
<html> <head> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/css/images/logo.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p id = "rcorners1">Rounded corners!</p> <p id = "rcorners2">Rounded corners!</p> <p id = "rcorners3">Rounded corners!</p> </body></html>
效果如下:
每個角屬性:
我們可以指定每個角屬性,如下例所示:
<html> <head> <style> #rcorners1 { border-radius: 15px 50px 30px 5px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners2 { border-radius: 15px 50px 30px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners3 { border-radius: 15px 50px; background: #a44170; padding: 20px; width: 100px; height: 100px; } </style> </head> <body> <p id = "rcorners1"></p> <p id = "rcorners2"></p> <p id = "rcorners3"></p> </body><body>
效果如下:
感謝你能夠認真閱讀完這篇文章,希望小編分享css如何設置4個圓角內容對大家有幫助,同時也希望大家多多支持創新互聯,關注創新互聯行業資訊頻道,遇到問題就找創新互聯,詳細的解決方法等著你來學習!
標題名稱:css如何設置4個圓角
文章起源:http://vcdvsql.cn/article48/gghjhp.html
成都網站建設公司_創新互聯,為您提供商城網站、營銷型網站建設、動態網站、網站策劃、標簽優化、搜索引擎優化
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯