详解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 相关文章推荐
CSS3实现头像旋转效果
Mar 13 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
php给图片添加文字水印方法汇总
2015/08/27 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python 除法小技巧
2008/09/06 Python
netbeans7安装python插件的方法图解
2013/12/24 Python
python创建临时文件夹的方法
2015/07/06 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
python IP地址转整数
2020/11/20 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
教师国庆节演讲稿范文2014
2014/09/21 职场文书
年度考核个人总结
2015/03/06 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python
hive数据仓库新增字段方法
2022/06/25 数据库