首頁 > 其他

完全自適應的單色或單線圓角框

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

完全自適應的單色或單線圓角框

    先給大家看下最終的效果：

   

實現單色或者單線圓角框完全自適應，使用切下的圖片的四角。切開的圖片如所示：

    接下來，看以實現的原理：首先採用水平自適應的方法，使左上、右上部分做到寬度自適應。用同樣的方法，使左下、右下部分也可以自適應寬度，這就完成了水平自適應部分。然後在上下兩部分的中間加入內容部分，使用背景和邊線的方法銜接頂部和底部，做到垂直自適應。

    根據以上的分析，製作的頁面結構如下：

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完全自適應的單色或單線圓角框</title>
<style>
.main {
 width:600px;
 background: #EEE;
}
.top {
 height:8px;
 /*padding-right:8px;*/
 background:url(images/right_top.gif) no-repeat right top;
}
.top_left {
 height:8px;
 /*padding-left:8px;*/
 background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
 height:7px;
 margin:0 8px;
 font-size:0px;
 border-top:1px solid #666;
}
.bottom {
 height:8px;
 /*padding-right:8px;*/
 background:url(images/right_bottom.gif) no-repeat right bottom; 
}
.bottom_left {
 height:8px;
 /*padding-left:8px;*/
 background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
 height:7px;
 margin:0 8px;
 font-size:0px;
 border-bottom:1px solid #666;
}
.round_content {
 padding:15px;
 border-left:1px solid #666;
 border-right:1px solid #666;
}
</style>
</head>
<body>
<div class="main">
  <div class="content">
    <div class="top">
      <div class="top_left">
        <div class="top_line"></div>
      </div>
    </div>
    <div class="round_content">這是一個單線的圓角框，可以在不同大小的瀏覽器視窗進行測試該樣式的顯示效果<br />
      增加的內容<br />
      增加的內容<br />
      firefox能解析第一段，後面的兩個因為前面加了特殊符號“*”和“_”,firefox認不了，所以只認background:#ffc，看到的是黃色；
      ie7前兩短都能認，以最後的為準，所以最後解析是background:#ccc，看到的是灰色；
      ie6三段都能認，而且“_”這個只有ie6能認，所以最後解析是_background:#000，看到的是黑色
      阿門！已經是最簡單和最好理解的寫法了，如果你是google進來的，我可以很負責任的告訴你，這種方法是ok的，我測試過。
      ie8的那段相容7的代碼我也測試過了，在我現在的windos 7 測試版所帶的ie8是沒問題的，以後ie8正式版出來還管不管用就不知道了。
      ps：如果你發現按我這樣寫還是有問題的話，請查看一下你的html頭，看看
      之前的內容是不是這樣的標準寫法 </div>
    <div class="bottom">
      <div class="bottom_left">
        <div class="bottom_line"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

 

 

 

<style>
.main {
 width:600px;
 background: #EEE;
}
.top {
 height:8px;  /*高度必須和北京的高度一致*/
 /*padding-right:8px;*/
 background:url(images/right_top.gif) no-repeat right top; /*北京的屬性設定*/
}
.top_left {
 height:8px;
 /*padding-left:8px;*/
 background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
 height:7px; /總共8px，邊框1px，剩餘7px/
 margin:0 8px;/*上文中藍色的代碼和本段藍色代碼二取一，即可*/
 font-size:0px;/*解決ie6中空block的高度為1單位的font-size問題*/
 border-top:1px solid #666;
}
.bottom {
 height:8px;
 /*padding-right:8px;*/
 background:url(images/right_bottom.gif) no-repeat right bottom; 
}
.bottom_left {
 height:8px;
 /*padding-left:8px;*/
 background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
 height:7px;
 margin:0 8px;
 font-size:0px;
 border-bottom:1px solid #666;
}
.round_content {
 padding:15px;
 border-left:1px solid #666;
 border-right:1px solid #666;
}
</style>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More