DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> Html輕松實現圓角矩形
Html輕松實現圓角矩形
編輯：HTML和Xhtml     

問題：如何通過div+css以及定位來實現圓角矩形？
 
解決方法概述：
 
內容：首先在<body>標簽內部裡添加一個大層（大層用來固定整體大框架），然後大層內包含四個小層（四個小層裡分別放四個圓角（事先用ps做好橢圓形形狀，然後用切片工具切圖 ））
 
樣式：在<head>標簽內部設置的css要有的屬性：
 
1.position：relative；
 
2.寬和高;
 
3背景顏色;
 
4.邊框線（用來調整四個原角的相對位置，調整好後可以將邊框線設置刪除）
 
在設置小層的css時，每個層裡都要有的屬性有：
 
1.position：absolute；
 
2.寬和高；
 
3.方向屬性（left，right，bottom,top）
 
4.background：url（""）no-repeat;(引入各個方向的圓角圖片)
 
以下是我實現圓角矩形的代碼：

XML/HTML Code復制內容到剪貼板
  1. <!doctype html>  
  2.   
  3. <html lang="en">    
  4.   
  5.  <head>  
  6.   
  7.   <meta charset="UTF-8">  
  8.   
  9.   <meta name="Generator" content="EditPlus®">  
  10.   
  11.   <meta name="Author" content="">  
  12.   
  13.   <meta name="Keywords" content="">  
  14.   
  15.   <meta name="Description" content="">  
  16.   
  17.   <title>圓角制作</title>  
  18.   
  19.   <style type=text/css>  
  20.   
  21.   #p   
  22.   
  23.     
  24.   
  25.   {   
  26.   
  27.   position:relative;   
  28.   
  29.   width:400px;   
  30.   
  31.   height:200px;   
  32.   
  33.   background:black;   
  34.   
  35.   margin:auto;   
  36.   
  37.   }   
  38.   
  39.   #plefttop   
  40.   
  41.   {    
  42.   
  43.   position:absolute;   
  44.   
  45.   width:50px;   
  46.   
  47.   height:50px;    
  48.   
  49.  background:url("images/11.jpg") no-repeat;   
  50.   
  51.   }   
  52.   
  53.    #prighttop    
  54.   
  55.   {   
  56.   
  57.   position:absolute;   
  58.   
  59.   width:50px;   
  60.   
  61.   height:50px;   
  62.   
  63.   right:-9px;   
  64.   
  65.   top:0px;    
  66.   
  67.   background:url("images/22.jpg")  no-repeat;   
  68.   
  69.   }   
  70.   
  71.    #pleftbottom   
  72.   
  73.   {   
  74.   
  75.   position:absolute;   
  76.   
  77.   width:50px;   
  78.   
  79.   height:50px;   
  80.   
  81.   left:0px;   
  82.   
  83.   bottom:-14px;   
  84.   
  85.   background:url("images/33.jpg") no-repeat;   
  86.   
  87.   }   
  88.   
  89.   #prightbottom   
  90.   
  91.   {   
  92.   
  93.    position:absolute;   
  94.   
  95.   width:50px;   
  96.   
  97.   height:50px;   
  98.   
  99.   right:-9px;   
  100.   
  101.   bottom:-14px;   
  102.   
  103.   background:url("images/44.jpg") no-repeat;   
  104.   
  105.   }   
  106.   
  107.   </style>  
  108.   
  109.  </head>  
  110.   
  111.  <body>  
  112.   
  113. <div id=p>  
  114.   
  115. <div id=plefttop></div>  
  116.   
  117. <div id=prighttop></div>  
  118.   
  119. <div id=pleftbottom></div>  
  120.   
  121. <div id=prightbottom></div>  
  122.   
  123. </div>  
  124.   
  125. </body>  
  126.   
  127. </html>    
  128.   

注意：我的代碼裡用的css樣式是內聯式，CSS樣式有三種：內聯式，嵌入式，外部式。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

原文鏈接：http://www.cnblogs.com/cyn941105/p/5588940.html

HTML和Xhtml
HTML用正則表達式檢驗表格的實例代碼
下面給大家分享HTML用正則表達式檢驗表格的實例代碼，具體代碼內容如下所示：<span sty
解決html 圖片img加超鏈接後產生難看的藍色邊框問題
html img加了超鏈接之後產生難看的藍色邊框如下：解決辦法：CSS樣式表中增加樣式：復制代碼代碼
HTML5與未來的網頁設計（英文教程）
網頁制作poluoluo文章簡介：在這篇文章中，我希望能夠給你一些提示和洞察HTML5 ，以幫助減輕

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
網頁制作前端技術應該繼續改革 如何給span標記的樣式設置width屬性 HTML5實例教程:FileReader、拖拽和canvas 讓IE支持HTML5辦法 iframe子頁面操作父頁面並實現屏蔽頁面彈出層效果 html借助marquee實現文字左右滾動 IE8下noscript標記的BUG仍然存在 iframe下頁面傳參數為亂碼問題探討 DOCTYPE 文檔類型聲明(網頁愛好者必看) Html+css實現純文字和帶圖標的按鈕
熱門推薦
HTML validate HTML驗證 如何實現框架窗口間的關聯及超鏈接的target屬性的使用 給網站添加 favicon的技巧 網址前面的小圖標 Marquee標記在XHTML代碼中該如何用 iframe的src設置為about:blank之後細節探討 HTML教程,簡單學習HTML語言(2) HTML5設計網頁時應該避免的一些小錯誤 Form表單提交刷新頁面不跳轉源碼設計 HTML的meta標簽常見用法集錦
大家都在看
javascript學習筆記(六) Date 日期類型 bootstrap模態框消失問題的解決方法 JS實現點擊顏色塊切換指定區域背景顏色的方法 讓HTML和JSP頁面不緩存從Web服務器上重新獲取頁面 每天一篇javascript學習小結（面向對象編程） JS模塊與命名空間的介紹 基於JS組件實現拖動滑塊驗證功能(代碼分享) jQuery中noconflict函數的實現原理分解
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved