详解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样式中的 !important * _ 符号
Mar 09 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
大学毕业自我评价
2014/02/02 职场文书
主管竞聘书范文
2014/03/31 职场文书
司机岗位职责说明书
2014/07/29 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL