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 ...
随机推荐
- linux c中select使用技巧——计时器(转）
通过本文你会了解到: 1. select()原型及参数说明 2. select()应用情景 3. select()注意事项 4. select()作定时器 原型 int select(int nfds ...
- Linq的日期比较
在一个项目中要进行linq的日期比较,从一个表的时间类型字段中取出日期,比较是否为当天日期.语句如下: epark_middlelayerEntities eparkMiddle = new epar ...
- 【Java】Java_03第一个Java程序
第一个JAVA程序的编写和运行 1.使用记事本编辑 public class Welcome{ public static void main(String[] agrs){ System.out.p ...
- windows / Linux 远程桌面访问全面总结 / 共享文件
一般来说,ssh 是指无图形界面形式,是命令行的方式. 速度快. vnc 是的是图形界面形式. 速度慢. ssh 方式登陆: 1.windows ...
- KINavigationController使用演示例子
代码地址如下:http://www.demodashi.com/demo/12905.html 运行效果 实现思路 创建pan手势,添加到页面中,监听手势的动作.重写push的方法,在push之前截图 ...
- Pattern Recognition and Machine Learning 模式识别与机器学习
模式识别(PR)领域: 关注的是利⽤计算机算法⾃动发现数据中的规律,以及使⽤这些规律采取将数据分类等⾏动. 聚类:目标是发现数据中相似样本的分组. 反馈学习:是在给定的条件下,找到合适的动作, ...
- asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（三）—— 简单登录页面+sqlite+动软代码生成器的使用
上一节讲到利用easyui的layout.tree.tab和datagrid创建用户管理的页面,注意利用到easyui的页面一定要按顺序添加jQuery和easyUI的.js和.css样式,灵活查看e ...
- CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\
解决方法: 1:设置 C:\windows\temp 文件夹安全权限 添加用户 NETWORK SERVICE 写入和读取权限 2:设置 C:\windows\temp 文件夹安全权限 添加用户 ...
- Atitit.获得向上向下左的右的邻居的方法 软键盘的设计..
Atitit.获得向上向下左的右的邻居的方法 软键盘的设计.. Left right可以直接使用next prev.. Up down可以使用pix 判断...获得next element的posit ...
- INSERT 失败，因为下列 SET 选项的设置不正确: 'ARITHABORT'
当你在SQL Server上试图更新一个索引视图引用的表时,你可能回收到如下有错误 INSERT 失败,因为下列 SET 选项的设置不正确: 'ARITHABORT' 你必须在TSQL前Set ARI ...