CSS3教程:边框属性border的极致应用


Posted in HTML / CSS onApril 02, 2009

这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的标签影响到你的视觉神经,那么你可以权当一种业余欣赏。
作者:冰极峰
博客地址:http://www.cnblogs.com/binyong
这世界太疯狂,Border属性也搞模仿秀!
这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的标签影响到你的视觉神经,那么你可以权当一种业余欣赏。
下面这个截图是border属性的几种基本变化,通过对这几种基本变化的延伸引用,你可以变化出各种丰富的案例出来:
CSS3教程:边框属性border的极致应用
图一
如我在另一篇文章《用div css模拟表格对角线》中说到的一样,这些变化其实就是基于如下的基本原理:
border-left:20px transparent dotted;
border-top:20px green solid;
border-right:20px transparent dotted;
border-bottom:20px orange solid;
width:0px;
height:0px;
overflow:hidden;

注意:transparent是用来透明的,并且要设置的线条的样式为dotted(点线)。宽高为0,就会只显示边框部分,然后用overflow来将多余部分截取掉,剩下的就是斜角内容了。
斜角的组合规律如下:

    border-left和border-top组成从左上到右下的斜线 border-right和border-top组成从右上到左下的斜线 border-right和border-bottom组成从右下到左上的斜线 border-left和border-bottom组成从左下到右上的斜线

有了这些基本规律就可以变化无穷了,发挥你的想像力吧,我们来看看有些什么变化。
下图是应用这种原理变化出来的不规则选项卡,为了简少代码量,我没有加上js功能,你们可以自己试试。
PS:这些链接全部有翻滚状态,你可直接使用,已经做了兼容性测试。
CSS3教程:边框属性border的极致应用
图二
上一页12 下一页 阅读全文
HTML / CSS 相关文章推荐
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 #HTML / CSS
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 #HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 #HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 #HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 #HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 #HTML / CSS
You might like
php框架Phpbean说明
2008/01/10 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
layui实现数据分页功能
2019/07/27 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python实现可逆简单的加密算法
2019/03/22 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
医学专业大学生求职信
2014/07/12 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
优秀党员推荐材料
2014/12/18 职场文书
个人学习总结范文
2015/02/15 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
Hive日期格式转换方法总结
2022/06/25 数据库