巧用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计算圆周率