首頁 > 開發者 > JavaScript

巧用css border

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

  • 上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。
  • 調整寬度大小可以調節三角形形狀。

實現三角形

樣本1：

 

#test1{    height:20px;    width:20px;    border-color:#FF9600 #3366ff #12ad2a #f0ed7a;    border-style:solid;    border-width:20px;}

樣本2：

在上面的基礎上，把高度寬度都設為0時，會呈現邊界斜線。

 

#test2 {    height:0;    width:0;    overflow: hidden; /* 這裡設定overflow, font-size, line-height */    font-size: 0;     /*是因為, 雖然寬高度為0, 但在IE6下會具有預設的 */    line-height: 0;  /* 字型大小和行高, 導致盒子呈現被撐開的長矩形 */    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

樣本3：

樣本2中可以看到有4個三角形了，如果把4種顏色，只保留一種顏色，餘下3種顏色設定為透明或者與背景色相同，那就形成一個三角形。

 

#test3 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid;    border-width:20px;}

樣本4：

樣本3中，在IE6下，需要設定餘下三邊的border-style為dashed，即可達到透明的效果。

#test4 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid dashed dashed dashed;    border-width:20px;}

樣本5：

上述畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線上。

 

#test5 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 #3366ff transparent transparent;    border-style:solid solid dashed dashed;    border-width:40px 40px 0 0 ;}

保留其中一種顏色，就可以得到斜邊在對角線上的三角形了。

 

實現圓角效果

可以實現近似圓角，其實是一個非常小的梯形展示出來的。

 

<!DOCTYPE HTML><html><head><style type="text/css">.test{width:200px;height:50px;}.test .top{width:194px;border-color:transparent transparent #FF9600 transparent;*border-color:pink pink #FF9600 pink;border-style:dashed dashed solid dashed;border-width:3px;filter:chroma(color=pink);}.test .center{width:200px;height:40px;background-color:#FF9600;}.test .bottom{width:194px;height:5px;border-color:#FF9600 transparent transparent transparent;*border-color:#FF9600 pink pink pink;border-style:solid dashed dashed dashed;border-width:3px;filter:chroma(color=pink);}</style></head><body><div class="test">  <div class="top">  </div>  <div class="center"></div>  <div class="bottom">  </div></div></body></html>

 

本文章原先以中文撰寫並發佈於 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