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. rails generate model/resource/scaffold的区别

    If you’re just learning Ruby on Rails, you may be confused as to when to generate individual models, ...

  2. 说说C#的数学类,Math,浮点数(上)

    说说C#的数学类,Math,浮点数 C#语言支持下图所看到的的数值类型,各自是整数,浮点数和小数 可能不是非常清楚,可是细致看看还是能看清楚的. 在一个C#程序中,整数(没有小数点的数)被觉得是一个i ...

  3. php RSA 加密 与java加密互交，java解密

    <? php class encrypt{ var $pub_key; function redPukey() { $pubKey = "MIIDhzCCAm+gAwIBAgIGASY ...

  4. 使用 curl() 函数实现不同站点之间注册用户的同步

    一 需求 在A站点注册一个新用户,那么,在B站点也会被同时注册 二 思路 在A站点注册的同时,调用API接口实现在B站点也会被同时注册 三 实现 主要代码如下: function http_curl( ...

  5. Pmon （LS1B）start.s

    loongson ls1b FPGA验证 只有DDR flash UART pmon移植 和原版本相比,DDR controller和ls1b不一致. /* $Id: start.S,v 1.1.1. ...

  6. DMA摘记

    1.特点 PIO模式下硬盘和内存之间的数据传输是由CPU来控制的:而在DMA模式下,CPU只须向DMA控制器下达指令,让DMA控制器来处理数据的传送,数据传送完毕再把信息反馈给CPU,这样就很大程度上 ...

  7. hdu 4597 Play Game(记忆化搜索)

    题目链接:hdu 4597 Play Game 题目大意:给出两堆牌,仅仅能从最上和最下取,然后两个人轮流取,都依照自己最优的策略.问说第一个人对多的分值. 解题思路:记忆化搜索,状态出来就很水,dp ...

  8. 几个div并列显示效果消除之间的间隔

    今天在做一个静态页面时,头部的广告条是很大一张图片,考虑到网页访问时的加载速度,因此需要把一幅图拆成几个尺寸较小的图片来作为背景图,但是采用div来布局时,出现了div不能显示在一行的情况,所以开始想 ...

  9. HDU5374 Tetris （2015年多校比赛第7场）大模拟

    思路: 先写好了几个函数.旋转,四种操作,推断能否够进行合并消除 题中有好几处要考虑的细节问题,如 自然下落究竟部时不进行合并的推断,而是当自然下落非法时才推断 假设消除一行,这一行上面的所以方块仅仅 ...

  10. 也许，这样理解HTTPS更容易_转载

    转自:也许,这样理解HTTPS更容易 原文衔接:https://showme.codes/2017-02-20/understand-https/ 作者:翟志军  摘要 本文尝试一步步还原HTTPS的 ...