border属性在项目中使用的还是蛮频繁的。例如页签、按钮这样的。

border简写属性是按照如下属性设置的:

border:border-width/border-style/border-color.

如果说我需要一个灰色的1像素的实线边框

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8"/>

    <title></title>

    <style type="text/css">

        ul {

            list-style:none;

        }

        li {

            border:1px solid #cccccc;

            width:60px;

            height:40px;

            float:left;

        }

    </style>

</head>

<body>

   <ul>

       <li>

           tab1

       </li>

   </ul>

</body>

</html>

当然，我们也可以分开来写。

li {

            border-width:1px;

            border-style:solid;

            border-color:#cccccc;

            width:60px;

            height:40px;

            float:left;

}

了解了border的基本属性，我们就来看看如何用border-color这个属性来制作小三角形。有时候，我们在项目中可能需要这样的效果。一个tab页签的当前页中我们需要一个倒三角形的小下标来指示。

一般来说我们可能想到的是使用切好的小三角形图片使用定位来做。其实，我们完全可以使用border-color这个属性来替换掉图片。

 a {

            display:block;

            width:50px;

            height:50px;

            border-style:solid;

            border-color:#999999 #ff0000 #000000 #4cff00;

            border-width:20px;

 }

　我们给一个a元素设置了边框的值，显示如下：

在我们的浏览器中，每个边框是以等腰梯形的形式闭合在一起的。如果我们要让等腰梯形变成一个三角形。那么，我们a元素中间的content内容就要把width和height全部设置为0px.这样的话中间的白色content部分就会消失不见了。只剩下边框了。

a {

            display:block;

            width:2px;

            height:2px;

            border-style:solid;

            border-color:#999999 #ff0000 #000000 #4cff00;

            border-width:20px;

}

　　

当width和height为2px时，中间还有一个长宽为2px的正方形。当完全为零时，就和我上面说到的一样，变成了一个四个闭合在一起的等边三角形。

而这个三角形的大小就可以通过border-width这个属性来改变等边三角形的高来进行控制。

在border-width中还有一个transparent这个值。它是让按照上-右-下-左排序的边框设置为透明色。所以我们可以让下-右-左全部为透明色，只留下上面的灰色三角形，这样我们就通过css来完成了一个小三角形的制作。

a {

            display:block;

            width:0px;

            height:0px;

            border-style:solid;

            border-color:#999999 transparent transparent;

            border-width:30px;

}

　　

No image!使用border-color属性来制作小三角形的更多相关文章

  1. CSSborder制作小三角形

    #cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...

  2. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  3. 自绘按钮,添加Color属性（转载）

    在标准的Windows程序中所有按钮均没有颜色.因此Delphi提供的所有按钮组件也均无颜色属性,有时你可能做了一个五颜六色的程序界面,而按钮颜色可能很不相称. 在此本人提供一种用自定义组件制作有颜色 ...

  4. CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...

  5. text-decoration与color属性

    text-decoration属性值 如果指定某个标签的text-decoration属性时,希望为其添加多个样式(比如:上划线.下划线.删除线),那么需要把所有的值合并到一个规则中才会生效 p{ t ...

  6. (六)学习CSS之color属性

    参考:http://www.w3school.com.cn/cssref/pr_text_color.asp color 属性规定文本的颜色. 这个属性设置了一个元素的前景色(在 HTML 表现中,就 ...

  7. HTML+CSS基础 border css属性 Div块 盒子

    border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...

  8. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  9. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

随机推荐

  1. hdu5289 Assignment (区间查询最大值最小值，st算法...)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5289 题意:给定长度为n的序列a和一个整数K,找出最大值和最小值的差值小于K的区间.输出满足条件的区间的个 ...

  2. ActiveMQ实现负载均衡+高可用部署方案 -转载

    转:http://www.open-open.com/lib/view/open1400126457817.html 一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的,能力 ...

  3. Memcachedclientutils类

    0.个人标签 我的CSDN博客地址: http://blog.csdn.net/caicongyang 1.依赖的jar包 commons-pool-1.5.6.jar slf4j-api-1.6.1 ...

  4. WireShake的使用

    转自点击打开链接 之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS. 这篇文章介绍另一个好用的抓包工具wireshark, 用来获取网络数据封包,包括http,TCP,UDP,等网络协 ...

  5. 安装JDK不当--找不到或无法加载主类 com.sun.tools.javac.Main

    问题描述:我的问题是在使用javac编译测试程序市,出现如下错误: 错误: 找不到或无法加载主类 com.sun.tools.javac.Main 解决办法:当出现这个错误时,百度之,结果很多人都是说 ...

  6. WPF入门教程系列二

    WPF控件和布局 一.  前言  公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了 ...

  7. 通过windows自带的系统监视器来查看IIS并发连接数(perfmon.msc)

    如果要查看IIS连接数,最简单方便的方法是通过“网站统计”来查看,“网站统计”的当前在线人数可以认为是当前IIS连接数.然而,“网站统计”的当前在线人数统计时间较长,一般为10分钟或15分钟,再加上统 ...

  8. Atitit. C#.net clr 2.0  4.0新特性

    Atitit. C#.net clr 2.0  4.0新特性 1. CLR内部结构1 2. CLR 版本发展史3 3. CLR 2.0 3 4. CLR 4 新特性 概览4 4.1.1.  托管与本地 ...

  9. Unity3d Serialize问题

    备忘: 1. ScriptableOjbect中,由于Serialization的原因,不能使用基类引用来存储子类对象,这样都会导致数据丢失 2. 无法直接对Unity的数据如,vector3, qu ...

  10. maven项目工程报错：cannot be resolved to a type

    1.在本地仓库中,搜索“_maven.repositories”所有匹配项,并彻底删除 2.然后再删除“.lastUpdated”所有匹配项 3.最后再重新在eclipse中执行操作:update d ...