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心形加载的动画源码的实现
Mar 09 HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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 判断变量类型实现代码
2009/10/23 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
深入理解vue Render函数
2017/07/19 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
企业统计员岗位职责
2013/12/13 职场文书
给客户的感谢信
2015/01/21 职场文书
运动会宣传语
2015/07/13 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript