• 上下左右边框交界处呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或颜色，可以得到小三角、梯形等。
  • 调整宽度大小可以调节三角形形状。

实现三角形

示例1：

#test1{

    height:20px;

    width:20px;

    border-color:#FF9600 #3366ff #12ad2a #f0ed7a;

    border-style:solid;

    border-width:20px;

}

示例2：

在上面的基础上，把高度宽度都设为0时，会呈现边界斜线。

#test2 {

    height:;

    width:;

    overflow: hidden; /* 这里设置overflow, font-size, line-height */

    font-size:;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */

    line-height:;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */

    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

    border-style:solid;

    border-width:20px;

}

示例3：

示例2中可以看到有4个三角形了，如果把4种颜色，只保留一种颜色，余下3种颜色设置为透明或者与背景色相同，那就形成一个三角形。

#test3 {

    height:;

    width:;

    overflow: hidden;

    font-size:;

    line-height:;

    border-color:#FF9600 transparent transparent transparent;

    border-style:solid;

    border-width:20px;

}

示例4：

示例3中，在IE6下，需要设置余下三边的border-style为dashed，即可达到透明的效果。

#test4 {

    height:;

    width:;

    overflow: hidden;

    font-size:;

    line-height:;

    border-color:#FF9600 transparent transparent transparent;

    border-style:solid dashed dashed dashed;

    border-width:20px;

}

示例5：

上述画的小三角的斜边都是依靠原来盒子的边，还有另一种形式的小三角，斜边在盒子的对角线上。

#test5 {

    height:;

    width:;

    overflow: hidden;

    font-size:;

    line-height:;

    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>

巧用css border的更多相关文章

  1. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  2. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  3. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  4. CSS Border（边框）

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  5. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  6. 巧用 CSS 构建渐变彩色二维码

    今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维 ...

  7. 巧用css的border属性完成对图片编辑功能的性能优化

    一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...

  8. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  9. 巧用CSS实现宝马LOGO

    某天突然遇到一个有趣的面试题,需用CSS实现一个宝马的Logo,第一反应就是这不是老生常谈的八卦图的小变形吗,只需用伪元素就可轻易的实现啦,但是细看要求说只能在一个标签里写样式,所以呜呜呜...请教下 ...

随机推荐

  1. git注意

    .ssh生成的公钥全部复制然后粘贴到gitHub上,公钥是放在.ssh文件夹里面的,复制前先找到这个文件夹 提示出错信息:fatal: remote origin already exists. 解决 ...

  2. JS-字符串操作，查找显示高亮

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 在NopCommerce中启用MiniProfiler

    MVC MiniProfiler是Stack Overflow团队设计的一款对ASP.NET MVC.WebForm 以及WCF 的性能分析的小程序.可以对一个页面本身,及该页面通过直接引用.Ajax ...

  4. 配置org.springframework.scheduling.quartz.CronTriggerBean（转）

    注意:定时器方法里如果执行动作的时间超出了定时器的周期,将会产生两个方法同时执行的情况. 一个Quartz的CronTrigger表达式分为七项子表达式,其中每一项以空格隔开,从左到右分别是:秒,分, ...

  5. KEIL MDK输出map文件分析

    一.文件分析流程 1.第一部分:Section Cross References 主要是各个源文件生成的模块之间相互引用的关系. stm32f10x.o(STACK) refers (Special) ...

  6. 第43讲：Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析

    今天学习了scala的界定,先来看看下面这段代码 //class Pair[T] (val first : T,val second : T)class Pair[T <: Comparable ...

  7. 第35讲：List的map、flatMap、foreach、filter操作代码实战

    List类的高阶方法          val fmap = List( 1,2 ,3). map { _ + 1 } //List(2, 3, 4)    val fruit_rev2 = frui ...

  8. poj 3635/hdu 1676 Full Tank? 车辆加油+最短路

    http://acm.hdu.edu.cn/showproblem.php?pid=1676 给出一张图,n<=1000,m<=10000. 有一辆车想从图的一个地方到达另外一个地方,每个 ...

  9. Data层相关问题 & JS循环取值

    第一次写博客,里面是自己工作中碰到的问题及总结的知识点,便于自己以后回顾,技术大牛们请直接忽略这篇文章,也希望能帮助到想我这样的小白! Data层相关问题总结: 1. 代码管理用的是 VSS 2005 ...

  10. 我总结的Android编程规范

    命名规则 1). 类名,接口名:以大写开头,如果一个类的类名由多个单词组成,所有单词的首字母必须大写,单词尽量写全称,不要简写,除非约定俗成的名字,例如:URL,RTMP,RTSP 这些广泛使用的专有 ...