CSS魔法堂:重拾Border之——解构Border
前言
当CSS3推出border-radius
属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?"。本系列将稍微深入探讨一下那个貌似没什么好玩的border!
《CSS魔法堂:重拾Border之——解构Border》
《CSS魔法堂:重拾Border之——图片作边框》
《CSS魔法堂:重拾Border之——不仅仅是圆角》
《CSS魔法堂:重拾Border之——更广阔的遐想》
解构Border
说起border我们自然会想起border box,而border box由4条紧紧包裹着padding box的边(line)组成,所以border的最小操作单元是line。 line具有厚度(line thickness)、样式(line pattern)和颜色(line color)3个特性,因此我们必须也只能围绕它们做文章了!
Line Thickness
border-width:(medium|thin|thick|<length>){1,4}
默认值medium,当font-size为17px或以下时,medium为1px、3px或5px,具体有UA决定。
大小关系:thin <= medium <= thick
另外有4个子属性border-top/right/bottom/left-width:medium|thin|thick|<length>
Line Color
border-color:(<color>|transparent){1,4}|inherit
默认值与color
属性值一致
<div style="color:red;border:solid;">hello world</div>
另外有4个子属性border-top/right/bottom/left-color:<color>|transparent|inherit
Line Patterns
border-style:(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset){1,4}
默认值none,表示忽略border-color
和border-width
的属性值,打死不显示border。
hidden,效果与none一样,只是应用于border-collapsed的表格上时不会发生冲突而已。
注意:各浏览器的效果是有差异的哦!
另外有4个子属性border-top/right/bottom/left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
合体技——一次搞定Thickness、Pattern和Color
border: <border-width>? <border-style> <border-color>?
其中<border-width>
和<border-color>
是可选,而<border-style>
为必填项。
另外有4个子属性border-top/right/bottom/left:<border-width>? <border-style> <border-color>?
自定义彩虹——border-top/right/bottom/left-colors
border-top/right/bottom/left-colors:(<color>|transparent){1,}|inherit
多颜色border规则
- 颜色从外至内排列;
- 每种颜色占1px。若border-width大于颜色种类,则最后一种颜色占据剩余的宽度;若border-width小于颜色中类,则舍弃多余的颜色。 兼容性:就FF3.0+支持而已
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 10px solid;
-moz-border-top-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-right-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-bottom-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-left-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
}
</style>
<div class="box">
</div>
总结
尊重原创,转载请注明
感谢
CSS Backgrounds and Borders Module Level 3 4. Borders
- 漏洞科普:你对弱口令重视吗?
- 自定义View简单使用
- 正确姿势:如何调戏蹭网者
- 当我们讨论流畅度的时候,我们究竟在说什么?
- ImageButton和ZoomButton使用大全
- Android 插件化突破应用市场无法上广告的问题
- ImageView的属性和方法大全
- sharedpreferences如何保存对象
- Android:全面解析熟悉而陌生 的 Application 类使用
- ToggleButton和Switch使用大全
- Android 无需权限显示悬浮窗, 兼谈逆向分析 App
- android数据保存之greendao
- CheckBox和RadioButton使用大全
- 关于 Android 实现滑动返回的几种方法总结
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 如何在C中传递二维数组作为参数?
- volatile相关知识
- c语言二级指针的使用,malloc内存申请
- istio部署模型
- 你所不知道的printf函数
- c语言之——整型的隐式转换与溢出检测
- Istio 的配置分析
- (C99)复合字面量
- 排障集锦:九九八十一难之第十三难!-------------史上最全MySQL 单实例故障排查
- c语言数组越界的避免方法
- 单片机的存储区范例
- 大点干!早点散----------Nginx+Tomcat动静分离
- 大点干!早点散----------深入剖析缓存加速--squid传统代理和透明代理
- stm32 HardFault_Handler调试及问题查找方法——飞思卡尔
- 堆栈的分布