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

实现三角形

示例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. 1201新课程TSQL语句

    1.创建数据库 create datebase 表名称 2.删除数据库 drop datebase 表名称 3.创建表 -create table test(表名称)( code(列名称) varch ...

  2. sql行列转换

    首先我们建立一张表,名为scoreInfo,各个字段的设计如下图,分别是name,course,score,表示姓名,成绩与分数,如图所示.

  3. mysql之group_concat函数详解

    函数语法: group_concat( [DISTINCT]  要连接的字段   [Order BY 排序字段 ASC/DESC]   [Separator '分隔符'] ) 下面举例说明: sele ...

  4. linux samba 服务器 简单配置

    1. rpm -qa|grep samba 查看是否有samba 2.使用yum -y install samba 安装samba 服务 进入/etc/samba/ 使用vi smb.conf 修改配 ...

  5. Linux下使用RecordMyDesktop进行屏幕录像

    近期我们在评估给用户提供视频教程的可能性,以此来展示某些用视频才能更好表达的教程.在挖掘这个问题的时候,我们发现极丰富的可用于屏幕录像的工具.这些程序大体上特性的区别有:视频质量,性能,兼容性.这在此 ...

  6. qooxdoo 3.0 发布，JavaScript 的 GUI 框架

    qooxdoo 3.0 是一个主要的版本,包含很多新特性和内部的改动,qooxdoo 3.0 是一个通用的 JS 框架,主要改进体现在 qx.Desktop, qx.Mobile, 和 qx.Webs ...

  7. MongoDB安装及shell简介

    MongoDB安装 MongoDB具有跨平台的优良特性,提供了对主流的操作系统支持,我们可以根据自己使用的操作系统,选择下载对应的安装包. 图 1. MongoDB支持各个版本的操作系统 MongoD ...

  8. C语言 线性表 顺序表结构 实现

    一个能够自动扩容的顺序表 ArrList (GCC编译). #include <stdio.h> #include <stdlib.h> #include <string ...

  9. SignalR + MVC5 简单示例

    本文和前一篇文章很类似,只不过是把 SignalR 应用在了 MVC 中 新建项目,选择 MVC 模板 安装 SignalR Install-Package Microsoft.AspNet.Sign ...

  10. 玩转cocos2d-x lua-binding, 实现c++与lua混合编程

    引言 城市精灵GO(http://csjl.teamtop3.com/)是一款基于cocos2d-x开发的LBS社交游戏, 通过真实地图的探索, 发现和抓捕隐匿于身边的野生精灵, 利用游戏中丰富的玩法 ...