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

实现三角形

示例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. Titanium系列－－利用js动态获取当前时间

    动态获取时间: //显示时间 function getDateTime() { var now = new Date(); var year = now.getFullYear(); var mont ...

  2. C#开发中使用Npoi操作excel实例代码

    C#开发中使用Npoi操作excel实例代码 出处:西西整理 作者:西西 日期:2012/11/16 9:35:50 [大 中 小] 评论: 0 | 我要发表看法 Npoi 是什么? 1.整个Exce ...

  3. 关于Guid

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  4. Java的历史

    1991 绿色计划 (Green Project) 1991 年 1 月 一个名为"Green Project"的项目启动.该项旨在为家用电器提供支持,使这些电器智能化并且能够彼此 ...

  5. Dynamic CRM 2013学习笔记（四十三）流程6 - 自定义流程活动

    当我们在流程里添加步骤时,有一些默认的步骤,像创建.更新.发邮件等,但如果你想加一个里面没有的步骤,比如发SMS消息,或者调用一个外部的web service,怎么办?这时就只能自定义一个流程活动了. ...

  6. sqlhelper sqlparameter 实现增删改查

    这是sqlHelper.cs类,类内里封装了方法 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  7. Python的with语句

    写过多线程程序的人肯定对各种锁很熟悉,尤其是下面这种代码 def lock_usage: lock.Lock() if(...) : lock.Unlock() return lock.Unlock( ...

  8. [.NET 即时通信SignalR] 认识SignalR (一)

    ASP .NET SignalR[1] 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知 ...

  9. Android-Universal-Image-Loader三大组件DisplayImageOptions、ImageLoader、ImageLoaderConfiguration详解

    一.介绍 Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示.所以,如果你的程序里需要这个功能的话, ...

  10. Hash哈希（二）一致性Hash（C++实现）

    一致性Hash 一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,经常用于分布式.负载均衡等. 原理 一致哈希是 ...