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. Docker使用国内镜像

    vim /lib/systemd/system/docker.service ExecStart=/usr/bin/dockerd -H fd:// --registry-mirror=https:/ ...

  2. 使用Google-Authenticator加强serverSSH登录

    对于须要特殊加密的人群,我这里给出对应的方法来进行谷歌式加密. 过程例如以下: 准备: 首先在你的手机上准备好client(自己百度下载) 接下来依照命令做: date 查看系统时间       da ...

  3. 一张图片教会你写mysql 语句

    MySQL的语句执行顺序 MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入 ...

  4. 在Ubuntu 12.04上配置iSCSI Target服务

      今天自己按照网上搜来的教程自己在Ubuntu 12.04上配置了iSCSI Target服务,在这里简单地做个纪录.操作系统是全新安装的Ubuntu 12.04,配置一块500 GB的SATA笔记 ...

  5. AngularJs学习笔记（1）——ng-app

    众所周知: ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素.所有 AngularJS 应用都必须要要一个根元素. 只有被具有ng-app属性的DOM元素包含的元素才会受ang ...

  6. 工作总结 string类型保存 "" 这种类型

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. css3 animation steps制作饿了么loading

    html代码 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  8. Redis之Hash数据结构

    0.前言 redis是KV型的内存数据库, 数据库存储的核心就是Hash表, 我们执行select命令选择一个存储的db之后, 所有的操作都是以hash表为基础的, 下面会分析下redis的hash数 ...

  9. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  10. python SimpleHTTPServer源码学习

    SimpleHTTPServer.SimpleHTTPRequestHandler继承了BaseHTTPServer.BaseHTTPRequestHandler. 源码中主要实现了BaseHTTPS ...