详解CSS的border边框属性及其在CSS3中的新特性
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
基础
你可能很熟悉边的最基本用法。
- border: 1px solid black;
上面的代码将给元素应用1px的边。即简洁又简单；但我们也可以稍作修改。
- border-width: thick;
- border-style: solid;
- border-color: black;
除了指定具体的边框宽度值，也可以使用这三个关键词：thin，medium 和 thick。
虽然乍看起来单个属性的方式没必要，但有极少数的情况下，当它是有利的，例如当你需要在特定的事件发生时更新边的部分属性。
也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。
- box {
- border: 1px solid red;
- }
- .box:hover {
- border: 1px solid green;
- }
一个更优雅的和简洁（DRY，don’t repeat yourself）的做法是只更新边的颜色属性。
- .box {
- border: 1px solid red;
- }
- .box:hover {
- border-color: green;
- }
此外，一会你会发现，这种单个属性的方式有助于通过CSS创建自定义的形状。
CSS3新特性
在 CSS3 中，border 增加了两个新的特性，一是边框图片，而是在边框颜色中使用渐变色。
边框图片利用 border-image 属性实现，可以为一个元素指定一个图片作为边框，代替传统的线条边框，它有五个子属性：
- border-image-source
设置边框图片的图片地址，只有设置了这个属性，才算是使用了边框图片，其值为 url() 的形式。
- border-image-width
该属性指定边框厚度，其值可以为带单位的长度值，也可以是不带单位的浮点值或百分比，还可以是“auto”，这时其值为 border-image-slice 的值，“auto”值很常用，可以方便地做出类似相册边框的精致边框。
- border-image-slice
该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill，其值可以为数值或百分比。例如：设置 border-image-slice: 20 25 30 35; border-image-slice: auto，则图像会产生像下图那样的四个角：
原图划分示意图：
实际效果图
- border-image-outset
该值设置边框图片的扩展，相当于在边框内容加入“padding”。
- 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 能通过私有属性支持。但作为一个很酷的效果，也可以先留意一下：
- .gradientcolor{
- border: 6px solid #fff;
- -moz-border-bottom-colors: #ff9900 #99cc33 #ccc;
- -moz-border-top-colors: #ff9900 #99cc33 #ccc;
- -moz-border-left-colors: #ff9900 #99cc33 #ccc;
- -moz-border-right-colors: #ff9900 #99cc33 #ccc;
- }
效果如下：
相关文章
- 这是一款由程序员之家翻译自国外网站的在线CSS工具，可在线调整生成样式的边框圆角效果，以及边框的宽度、颜色、样式等属性，还可实时预览生成的CSS代码，并支持一键复制代码2017-09-19
- 在CSS3里引入的很多新特征中，这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值，有兴趣的可以了解一下2017-06-30
- border是最常用的用来制作各种各样div边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:2016-06-23
- 用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.2016-06-02
- css3中新增了一个属性 border-image ，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边2015-11-24
- Border-color是专为边框的多颜色而准备的属性，接下来为大家介绍一下CSS3之边框多颜色Border-color的使用，喜欢的朋友不要错过2013-10-11
这篇文章主要介绍了一文教你玩转CSS border(边框),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-19
最新评论