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. 【转】线程同步------java synchronized详解

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...

  2. Django——Django,uwsgi Nginx组合建站

    近来抽时间看了点关于python的资料,试着架设了下运行环境,于是写了本文记录之. 用到的软件: Django-1.6.1 uwsgi-2.0.7 python-3.3.3 nginx-1.7.7 安 ...

  3. pngCanvas 是一个使用纯Python代码的生成png图像的工具

    #!/usr/bin/env python """Simple PNG Canvas for Python - updated for bytearray()" ...

  4. C语言循环中降低推断——————【Badboy】

    为了让编译器更好地优化循环,应该尽量让循环中降低推断,方法之中的一个是将推断语句整合进表达式.还是这个样例: for (int i = 0; i < 1000*10; i++) { sum += ...

  5. iOS 程序进入后台，包含用户上拉快捷菜单导致程序失去活跃的研究

    今日在使用某App时候,突然发现上拉菜单.程序视频扔在播放,咦!引起了我的兴趣. 首先,列出两个方法, 第一个方法是AppDelegate的代理.当程序进入后台时候调用 - (void)applica ...

  6. 【DB2】NOT IN使用中的大坑

    1.环境准备 ------建表TB DROP TABLE TB; CREATE TABLE TB ( ID INTEGER, LEVEL_DETAIL ) ); INSERT INTO TB (ID, ...

  7. UICollectionViews有了简单的重排功能

    代码地址如下:http://www.demodashi.com/demo/13213.html 一.前言 我是UICollectionView的忠实粉丝.这个类比起它的老哥UITableView类具有 ...

  8. web常见几种处理图标方法 【转】

    方法一: 用background制作小图标 像这样,拿到设计稿后把所有的图标放在一张图片上,利用background-position.width.height来控制图标的位置及大小. 代码: .ic ...

  9. centos7单机版安装hbase

    1.首先安装jdk1.8 yum install java-1.8.0-openjdk* -y 2.下载hbase 地址:http://mirrors.shuosc.org/apache/hbase/ ...

  10. cookie转coontoin

    /// <summary> /// 一个到多个Cookie的字符串添加到CookieCollection集合中[isGood代码] /// </summary> /// < ...