No image!使用border-color属性来制作小三角形
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属性来制作小三角形的更多相关文章
- CSSborder制作小三角形
#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- 自绘按钮,添加Color属性（转载）
在标准的Windows程序中所有按钮均没有颜色.因此Delphi提供的所有按钮组件也均无颜色属性,有时你可能做了一个五颜六色的程序界面,而按钮颜色可能很不相称. 在此本人提供一种用自定义组件制作有颜色 ...
- CSS的color属性并非只能用于文本显示
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...
- text-decoration与color属性
text-decoration属性值 如果指定某个标签的text-decoration属性时,希望为其添加多个样式(比如:上划线.下划线.删除线),那么需要把所有的值合并到一个规则中才会生效 p{ t ...
- (六)学习CSS之color属性
参考:http://www.w3school.com.cn/cssref/pr_text_color.asp color 属性规定文本的颜色. 这个属性设置了一个元素的前景色(在 HTML 表现中,就 ...
- HTML+CSS基础 border css属性 Div块 盒子
border css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
随机推荐
- 悟道—位IT高管20年的职场心经（读书笔记三）
悟道--一位IT高管20年的职场心经 第三章 世事洞明皆学问 职场就是你的大半个世界 是你一辈子也读不完的一大本书 想明确一个道理. 看明确一件事儿, 你就向成功迈进了一步. 1.1 "四 ...
- Struts2--百度百科
Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与Struts 1的体系结构差别 ...
- servlet--百度百科
Servlet(Server Applet),全称Java Servlet, 未有中文译文.是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servle ...
- 51单片机 | 1-Wire总线及应用实例
———————————————————————————————————————————— 1-Wire总线 - - - - - - - - - - - - - - - - - - - - - - - ...
- Date日期类型转化成中文字符串
例子: select to_char(sysdate,'yyyy"年"mm"月"dd"日"') as nowYear from dual 结 ...
- python 爬取王者荣耀高清壁纸
代码地址如下:http://www.demodashi.com/demo/13104.html 一.前言 打过王者的童鞋一般都会喜欢里边设计出来的英雄吧,特别想把王者荣耀的英雄的高清图片当成电脑桌面 ...
- lucene 加速索引建立速度
加速 lucene 索引建立速度 ImproveIndexingSpeed
- 统计MSSQL数据库中所有表记录的数量
SELECT a.name as '表名', b.rows as '记录数' FROM sysobjects AS aINNER JOIN sysindexes AS b ON a.id = b.id ...
- Atitit..状态机与词法分析 通用分词器 分词引擎的设计与实现 attilax总结
Atitit..状态机与词法分析 通用分词器 分词引擎的设计与实现 attilax总结 1. 状态机 理论参考1 2. 词法分析理论1 3. 词法分析实例2 4. ---code fsm 状态机通用 ...
- 网页webbrowser
http://www.codeproject.com/Articles/50544/Using-the-WebBrowser-Control-in-ASP-NET/