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. redis学习笔记——应用场景

    最近在看redis入门指南,现在就自己的学习情况说说自己的理解. 字符串类型(String) 字符串类型是Redis中最基本的类型,能存储任意形式的字符串,包括二进制数据.如一张照片也可以用字符串类型 ...

  2. 深入浅出CChart 每日一课——快乐高四第六课 二丫的青梅，返璞归真之普通窗体多区域画图

    有好些朋友给我反映,就是一个窗体中加入好几个CChartWnd之后.工作不正常.这个的确是这样,CChartWnd会接管原来窗体的消息循环,加入多个CChartWnd之后,就相当于出租房转手好几道,消 ...

  3. 「六」创建一个带 weblogic 服务的基础镜像

    Weblogic Weblogic 简单介绍以及其在 Docker 环境下的特殊应用 WebLogic是美国Oracle公司出品的一个application server确切的说是一个基于JAVAEE ...

  4. hibernate.cfg.xml文件连接mySql、Oracle、SqlServer配置

    1.连接mySql,文件配置如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibe ...

  5. 解决Odoo访问fonts.googleapis.com导致速度慢的问题

    Odoo中有些css文件引用了谷歌字体,但因为谷歌服务器被墙,导致部分页面加载受影响. 解决方法如下: 360网站卫士常用前端公共库CDN服务把谷歌字体库都存到它的CDN上了,因此我们只需把样式表中谷 ...

  6. 程序员取悦女票的正确姿势---Tip1（iOS美容篇）

    代码地址如下:http://www.demodashi.com/demo/11695.html 前言 女孩子都喜欢用美图工具进行图片美容,近来无事时,特意为某人写了个自定义图片滤镜生成器,安装到手机即 ...

  7. Oracle学习笔记（5）——查询

    基本查询语句 SELECT [DISTINCT] column_name1,...|* FROM table_name [WHERE conditions] 在SQL*PLUS中设置格式 更改显示字段 ...

  8. iOS开发－在Swift里使用AFNetworking方法

    在OC里使用惯了AFNetworking,比较喜欢这一个第三方库,在别的途径里得知可以在Swift里使用AFNetworking.但是那个时候我不知道具体的操作是怎样的,于是我只能去百度.GOOGLE ...

  9. RabbitMQ快速入门python教程

    摘要:HelloWorld 简介 RabbitMQ:接受消息再传递消息,可以视为一个“邮局”.发送者和接受者通过队列来进行交互,队列的大小可以视为无限的,多个发送者可以发生给一个队列,多个接收者也可以 ...

  10. 电脑端的全能扫描王：图片转文字识别、识别pdf、图片中的文字，图片提取txt

    手机中有全能扫描王,但PC端没有.所以需要另外找. 发现微软的oneNode有提供类似的功能. 第一步.下载Microsoft OneNode http://www.onenote.com/downl ...