详解CSS的border边框属性及其在CSS3中的新特性


Posted in HTML / CSS onMay 10, 2016

基础
你可能很熟悉边的最基本用法。

CSS Code复制内容到剪贴板
  1. border1px solid black;  

上面的代码将给元素应用1px的边。即简洁又简单;但我们也可以稍作修改。

CSS Code复制内容到剪贴板
  1. border-widththick;   
  2. border-stylesolid;   
  3. border-colorblack;  

除了指定具体的边框宽度值,也可以使用这三个关键词:thin,medium 和 thick。
详解CSS的border边框属性及其在CSS3中的新特性

虽然乍看起来单个属性的方式没必要,但有极少数的情况下,当它是有利的,例如当你需要在特定的事件发生时更新边的部分属性。
也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。

CSS Code复制内容到剪贴板
  1. box {   
  2.     border1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border1px solid green;   
  7. }  

一个更优雅的和简洁(DRY,don’t repeat yourself)的做法是只更新边的颜色属性。

CSS Code复制内容到剪贴板
  1. .box {   
  2.     border1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border-colorgreen;   
  7. }  

此外,一会你会发现,这种单个属性的方式有助于通过CSS创建自定义的形状。

CSS3新特性
在 CSS3 中,border 增加了两个新的特性,一是边框图片,而是在边框颜色中使用渐变色。
边框图片利用 border-image 属性实现,可以为一个元素指定一个图片作为边框,代替传统的线条边框,它有五个子属性:

CSS Code复制内容到剪贴板
  1. border-image-source  

设置边框图片的图片地址,只有设置了这个属性,才算是使用了边框图片,其值为 url() 的形式。

CSS Code复制内容到剪贴板
  1. border-image-width  

该属性指定边框厚度,其值可以为带单位的长度值,也可以是不带单位的浮点值或百分比,还可以是“auto”,这时其值为 border-image-slice 的值,“auto”值很常用,可以方便地做出类似相册边框的精致边框。

CSS Code复制内容到剪贴板
  1. border-image-slice  

该属性指定从上,右,下,左方位来分隔图像,将图像分成4个角,4条边和中间区域共9份,中间区域始终是透明的(即没图像填充),除非加上关键字 fill,其值可以为数值或百分比。例如:设置 border-image-slice: 20 25 30 35; border-image-slice: auto,则图像会产生像下图那样的四个角:
原图划分示意图:
详解CSS的border边框属性及其在CSS3中的新特性

实际效果图
详解CSS的border边框属性及其在CSS3中的新特性

CSS Code复制内容到剪贴板
  1. border-image-outset  

该值设置边框图片的扩展,相当于在边框内容加入“padding”。

CSS Code复制内容到剪贴板
  1. border-image-repeat  

设置用何种方式填充边框,其值可以为 stretch、repeat、round、space,stretch 是拉伸方式,repeat、round 和 space 方式都是平铺方式,但三个之间略有不同,repeat 是直接平铺图片,图片若超出边框时截断,round 会动态调整图片的大小,直到图片正好可以铺满整个边框,space 则会在图片之间增加空白,直至图片正好可以铺满整个边框。
值得注意的是,直至 Chrome 23, Firefox 17, Safari 5.1.7, Opera 12.5 ,IE 10 ,仅有 Firefox 支持 round ,没有任何浏览器支持 space 。
接下来是边框梯度颜色,相对边框图片,边框梯度颜色的浏览器支持度就更低了,暂时只有 Firefox 能通过私有属性支持。但作为一个很酷的效果,也可以先留意一下:

CSS Code复制内容到剪贴板
  1. .gradientcolor{   
  2.     border6px solid #fff;   
  3.     -moz-border-bottom-colors: #ff9900 #99cc33 #ccc;   
  4.     -moz-border-top-colors:    #ff9900 #99cc33 #ccc;   
  5.     -moz-border-left-colors:   #ff9900 #99cc33 #ccc;   
  6.     -moz-border-right-colors:  #ff9900 #99cc33 #ccc;   
  7. }  

效果如下:
详解CSS的border边框属性及其在CSS3中的新特性

HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 #HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 #HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 #HTML / CSS
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python3实现生成随机密码的方法
2014/08/23 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python实现Dijkstra算法
2018/10/17 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python实现粒子群算法
2020/10/15 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
锦旗赠语
2015/06/23 职场文书