border属性

布满荆棘的人生 2022-09-03 07:21 156阅读 0赞

**语法：**

border-top- style: none | hidden | <关键字> | inherit

**边框线的类型：**边框线的类型有九个确定值：  
none：没有边框。该值迫使border-width的计算值为0。

hidden：和none相似，除非在表格元素中解决边框冲突时。

线型的关键字包括：

dotted：

边框是一系列的点。

dashed：

边框是一系列的短线条的段。

solid：

边框是一条单一的线。

double：

边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值。

groove：

边框看上去好象是雕刻在画布之内。

ridge：

和grove相反：边框看上去好象是从画布中凸出来。

inset：

该边框使整个框看上去好象是嵌在画布中。

outset：

和inset相反：该边框使整个框看上去好象是从画布中凸出来。

边框有很多作用，常见的有作为导航栏的分割线、标示一块div等。

现在讨论 double 型边框的用法：

**语法：**

border:3px double #FF0000;

**兼容性：**浏览器的表现差别主要在于双线边框的双线之间的颜色，IE 6/7 以及Opera，双线之间是透明的，所以透出了父元素li的背景色，而其他的浏览器（包括IE 8）则使用了Input的背景色填充双线之间。

IE 6/7 以及Opera中，设定input边框色与自身背景色相同，可以出现类似图1的外观表现，而其他浏览器则是设定input边框色与父元素背景色相同可以实现类似图1的外观。

.test2 input { background:#666; border:3px double; color:#ccc; padding:2px;  }<br>
    .test2 .text1 { border-color:#ccc; }<br>
    .test2 .text2 { border-color:#666; }<br>
    .test2 .text3 { border-color:#CFF; }

之所以是类似，因为图1的边框颜色与其自身背景色不同。

参考网址：[点击打开链接][Link 1]

**要呈现两条边框的效果，可再加一个长宽各小一个像素的 div.**

[Link 1]: http://blog.csdn.net/ddcatlee/article/details/4651069

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS border 属性

近写网页，用到了border属性了解的不是很多，就整理了一下 border属性就是边框属性实例 p{ border:5px soil...

怼烎@/ 2024年04月17日 17:26/ 0 赞/ 60 阅读

相关 border属性

语法： border-top- style: none | hidden | <关键字> | inherit 边框线的类型：边框线的类型有九个确定值： none

布满荆棘的人生/ 2022年09月03日 07:21/ 0 赞/ 157 阅读

相关 CSS：不可思议的border属性

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

落日映苍穹つ/ 2022年08月14日 00:51/ 0 赞/ 151 阅读

相关 css3属性border-radius详解

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性

本是古典何须时尚/ 2022年07月15日 00:08/ 0 赞/ 313 阅读

相关 CSS3 border-radius 属性

CSS3 border-radius 属性 [CSS 参考手册][CSS] 实例向 div 元素添加圆角边框： div { borde

女爷i/ 2022年06月01日 02:22/ 0 赞/ 151 阅读

相关 css用border属性制作三角形

css用border制作三角形在css中，我们可以用边框制作一个三角形代码如下： <!DOCTYPE html> <html lang="en">

àì夳堔傛蜴生んèń/ 2022年05月20日 10:07/ 0 赞/ 234 阅读

相关 CSS padding、margin、border属性

转自：[http://www.cnblogs.com/linjiqin/p/3556497.html][http_www.cnblogs.com_linjiqin_p_3556

约定不等于承诺〃/ 2022年05月15日 12:13/ 0 赞/ 259 阅读

相关 CSS3 border-image 属性

-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; / 老版本的 Firefox

￡神魔★判官ぃ/ 2022年03月18日 13:16/ 0 赞/ 216 阅读

相关 CSS3 border-radius 属性

border-radius的含义是：圆角。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设

深藏阁楼爱情的钟/ 2022年03月18日 13:06/ 0 赞/ 184 阅读

相关 border-radius属性设置半圆弧线

开发工具与关键技术：DW border-radius属性作者：Mr\_肖先生撰写时间：2019年2月18日这是在今天写css3时碰到的，想要弄个微笑的表情却不知

骑猪看日落/ 2022年03月18日 01:28/ 0 赞/ 228 阅读