首页 > 开发 > CSS > 正文

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

2024-07-11 08:25:40
字体:
来源:转载
供稿:网友

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

CSS Code复制内容到剪贴板
  1. border: 1px solid black;  

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

CSS Code复制内容到剪贴板
  1. border-width: thick;    border-style: solid;   
  2. border-color: black;  

除了指定具体的边框宽度值,也可以使用这三个关键词:thin,medium 和 thick。
2016510104716910.jpg (773×528)

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

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

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

CSS Code复制内容到剪贴板
  1. .box {        border: 1px solid red;      
  2. }        
  3. .box:hover {        border-color: green;   
  4. }  

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

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

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表