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

实现三角形

示例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. string.Format , object[] args 使用

    string sql = "insert into TableA values('{0}','{1}','{2}',GetDate(),'{3}' "; sql = string. ...

  2. git -- 如何解决冲突

    遇到冲突,首先要编辑冲突文件,可以使用vim或者其他工具,冲突文件变现为: <<<<HEAD 到 ==== :代表本地分支的修改内容 ==== 到 >>>&g ...

  3. MongoDB 3.2 在windows上的安装

    翻译自 https://docs.mongodb.org/master/tutorial/install-mongodb-on-windows/ 在windows上安装 MongoDB 平台支持:从M ...

  4. c++中关于static关键字的问题

    C++的static关键字C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. ...

  5. Google Chrome: Make the Bookmarks Bar Display as Icons Only

    By reducing your bookmarks to show only the icons, you can access more of them from the Bookmarks ba ...

  6. kali linux 渗透测试视频教程 第五课 社会工程学工具集

    第五课 社会工程学工具集 文/玄魂 教程地址:http://edu.51cto.com/course/course_id-1887.html   目录 第五课社会工程学工具集 SET SET的社会工程 ...

  7. Nhibernate基础使用教程以及简易封装

    1.Nhibernate简介 NHibernate是一个面向.NET环境的对象/关系数据库映射工具.对象/关系数据库映射(object/relational mapping,ORM)这个术语表示一种技 ...

  8. [备忘][转]rsync使用时的常见问题

    sync使用时的常见问题: 错误1: rsync: read error: Connection reset by peer (104) rsync error: error in rsync pro ...

  9. Cacti学习笔记一：基本安装和配置

    1.安装依赖包 yum -y install net-snmp-devel mysql mysql-devel openssl-devel libtool 2.安装RRDTool yum -y ins ...

  10. atitit.提升软件开发的效率and 质量的那些强大概念and方法总结

    atitit.提升软件开发的效率and 质量的那些强大概念and方法总结 1. 主流编程中三个最糟糕的问题 1 1.1. 从理解问题后到实现的时间很长 1 1.2. 理解和维护代码  2 1.3. 学 ...