您好,欢迎光临郑州做网站网!
全国咨询热线:18539972853
首页/常见问题/文章详情

做企业网站时如何合理使用网页边框的样式属性

发表时间:2021-05-26 10:13:15    浏览次数:646    来源:做网站

在建企业网站的时候,会用到一些边框,无论是表格或是div,布局的时候边框可以做为一个分界线,让内容对比或衬托更加明显。边框的使用其实也很简单,一个是边框的粗细,另一个是边框的颜色。可以对局部整体设置,也可以单独设置上下左右四个方向的边框。在CSS中有一个关于颜色的属性:border-color,它一次可以接受最多4个颜色值。

企业网站网页边框设置

border-color值:[<color>|transparent]{1,4} | inherit   初始值:对简写属性未定义计算值:单个属性(border-top-color,顶部边框颜色)

如果网页设计的边框值小于4个,值复制就会起作用。如果设计人员希望h1元素有细的黑色上下边框,而且有粗的灰色左右边框,在CSS样式中应该这样写:

h1{border-style:solid;border-width:thin thick;border-color:black gray;}

当然一个颜色值会应用到所有4个边,如果应用了4个颜色值,那么每边都会有不同的颜色。可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和RGB值:

p{
    border-style:solid;border-width:thick;
    border-color:black rgb(25%,25%,25%)#808080 silver;}

也可以使用简写的方式一次性定义多个边框,比如对某一个段落P进行设置:

P{
    border:#cecece 1px solid; //四个边框均为灰色1px
}

还有一些单边border-color属性。其原理与单边样式和宽度属性相同。网站建设人员要为标题指定一个实线黑色边框,而且右边框为实线灰色,可以如下指定:

P{border-style:solid;border-color:black;border-right-color:gray;}

边框四个方向对应的属性名称:

顶部border-top-color、右侧border-right-color、底部border-bottom-color、 左侧border-left-color

透明边框的使用:
在有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent(在CSS2中引入)。这个值用于创建有宽度的不可见边框。假设你希望包含3个链接的一组链接有边框,默认地这些边框不可见,不过,鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明:

a:link, a:visited {
    border-style: solid; border-width: 5px; border-color: transparent;}
a:hover {border-color: gray;}

利用transparent,使用边框就像是额外的内边距一样,此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区(假设有可见的背景)。

警告:在IE7之前,IE/Win没有提供对transparent的支持。在以前的版本中,IE会根据元素的color值来设置边框颜色。


本文地址:https://www.up7.com.cn/news/383.html