巧用css border

時間 2019-11-06

標籤巧用 css border 欄目 CSS 简体版

原文原文鏈接

上下左右邊框交界處呈現平滑的斜線。利用這個特色，經過設置不一樣的上下左右邊框寬度或顏色，能夠獲得小三角、梯形等。
調整寬度大小能夠調節三角形形狀。

實現三角形css

示例1：html

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

示例2：字體

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

#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：code

示例2中能夠看到有4個三角形了，若是把4種顏色，只保留一種顏色，餘下3種顏色設置爲透明或者與背景色相同，那就造成一個三角形。htm

#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：blog

示例3中，在IE6下，須要設置餘下三邊的border-style爲dashed，便可達到透明的效果。class

#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：test

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

#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>

1. CSS 搞事技巧：border+transparent
2. css篇之border、border-radius、box-shadow、border-image
3. border使用小技巧
4. css之border-radius
5. CSS Border（邊框）
6. CSS 之 border
7. CSS筆記——border
8. 玩轉 CSS Border-Image
9. CSS屬性之border
10. CSS border-image屬性
更多相關文章...
• 使用 CSS 顯示 XML - XML 教程
• Markdown 高級技巧 - Markdown 教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。