详解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属性box-sizing的了解
Jan 04 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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 n个不重复的随机数生成代码
2009/06/23 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
jquery插件之easing使用
2010/08/19 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
node.js中watch机制详解
2014/11/17 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
环保倡议书
2014/04/14 职场文书
保证书格式范文
2014/04/28 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
志愿者工作心得体会
2016/01/15 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书