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

CSS3完成一個方格圓角效果的程式碼教學

Y2J
發布: 2017-05-22 11:28:15
原創
2192 人瀏覽過

本實例是CSS3實作p圓角。實現圓角的CSS3代碼句是: "border-radius: 20px;" 。需使用支援CSS3的瀏覽器運作,例如新版的Chrome、火狐,或IE9。 IE6、7、8不支援

程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3实现p圆角 - CSS3教程 - 计划 - 博客园</title> 
<meta name="
key
words" content="www.jb51.net"/> 
<style type="text/css">
 #yuanjiao{ 
font-family: Arial; 
border: 2px solid #379082; 
border-radius: 20px; 
padding: 30px 30px; 
width: 330px; }
</style> 
</head> 
<body> 
<p id="yuanjiao">
登入後複製

本實例是CSS3實作p圓角。實現圓角的CSS3代碼句是: "border-radius: 20px;" 。需使用支援CSS3的瀏覽器運作,例如新版的Chrome、火狐,或IE9。 IE6、7、8不支援。
腳本之家CSS3教學




效果圖(Chrome):

實際效果(請使用支援CSS3的瀏覽器):

本實例是CSS3實作p圓角。實現圓角的CSS3代碼句是: "border-radius: 20px;" 。需使用支援CSS3的瀏覽器運作,例如新版的Chrome、火狐,或IE9。 IE6、7、8不支援。

【相關推薦】

1. CSS3免費影片教學

2. 教你怎麼去規範的書寫CSS樣式

3. 關於H5和CSS3表單驗證的使用教學

4. 透過CSS3偽元素完成逐漸發光的邊框的程式碼詳解

5. CSS3完成圖片lowpoly動畫效果的過程詳解

#

以上是CSS3完成一個方格圓角效果的程式碼教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板