欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
css边框边框的组成
2017-09-26 11:58:50   来源:   评论:0 点击:
2016-03-15 02:47:00   来源:  浏览量29
在网站开发中我们经常会使用一些小三角形下拉提示,通常我们通过一张图片代 替,但是随着前端技术的发展,在能不使用图片的场景中减少图片的使用。因此我们另辟蹊径寻求一些较好的处理办法。下面我们就介绍一些如何通过css编写出一个小三角。
版权声明:本文为博主原创文章,未经博主允许不得转载
css边框边框的组成
 
html
 
css
.triangle{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red blue green pink;
}
三角形
 
通过以上例子,我们可以发现每一个方向的边框都是一个三角形,我们可以把需要的方向剩下其他方向边框都设置为透明就可以得到一个任意方向的三角形了。
 
下拉
 
html
 
 
css
 
.triangle{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red transparent transparent transparent;
}
注意:transparent就是把我们不需要的border-color设置为透明。
最终效果
Alt text
 
侧三角
 
html
 
 
css
 
.triangle{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red transparent transparent red;
}
注意:transparent就是把我们不需要的border-color设置为透明。
最终效果
Alt text
 
注意:如需在IE6中使用三角形,其不支持透明属性,建议把border-color设置为背景颜色。
 
css3 不同颜色圆形边框
 
html
 
 
css
 
 
.circle{
width: 80px;
height: 80px;
border-width: 10px;
border-style: solid;
border-color: red green blue yellow;
border-radius: 50%;
}
每个边框设置不同的颜色,圆形4边颜色就不同了

相关热词搜索:

上一篇:移动端布局常用技巧
下一篇:浅谈深拷贝浅拷贝

收藏