首页 >>  正文

css设置边框颜色

来源:baiyundou.net   日期:2024-09-20

在建企业网站的时候,会用到一些边框,无论是表格或是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{\n    border-style:solid;border-width:thick;\n    border-color:black rgb(25%,25%,25%)#808080 silver;}

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

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

还有一些单边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 {\n    border-style: solid; border-width: 5px; border-color: transparent;}\na:hover {border-color: gray;}

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

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

","gnid":"9d6c00df9a918bf7a","img_data":[{"flag":2,"img":[{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t01d4d9d53f7fd259b4.jpg","width":"850"},{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t015ae856bcb503cbcd.jpg","width":"850"}]}],"original":0,"pat":"art_src_0,sexf,sex4,sexc,fts0,sts0","powerby":"cache","pub_time":1697936940000,"pure":"","rawurl":"http://zm.news.so.com/8285fe57e30f0b5073ccc1eb3ef615de","redirect":0,"rptid":"b035694a61091705","rss_ext":[],"s":"t","src":"三七一网络","tag":[],"title":"在网页制作中合理应用网页边框的样式属性

支士伯2005怎样在css中给文章加边框? -
厉曹宽19485394979 ______ css中添加边框的代码为 1 border: width style color; /*分别设置边框粗细、zhi样式、颜色*/ 示例如下: 1. 创建Html元素:一个包含文章内容的div 1 <divclass="post">这是示例的文章.</div> 2. 设置css样式 1 2 3 4 5 div.post{ width:400px;height:100px; padding:10px; border:2pxsolid#ebbccb; /*设置边框为2px粗,实线,#ebbccb色*/ } 3. 观察显示效果

支士伯2005如何用css控制table的边框宽度和边框颜色 -
厉曹宽19485394979 ______ 可以通过设置单元格元素td的边框样式来实现: 1 border: width style color; /*分别设置边框的粗细、样式和颜色*/ 示例如下: 在HTML代码中给出两个表格 有 志 者 事 竟 成 苦 心 人 天 不 负 分别设置不同的样式 table{ /* 表格整体样式 */ ...

支士伯2005如何让div显示边框border样式 -
厉曹宽19485394979 ______ 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #000 代表设置对象边框宽度为1px黑色实现边框

支士伯2005css属性是什么 -
厉曹宽19485394979 ______ 布局属性(Layout properties) border 边框属性 该CSS属性用来设定边框宽度,风格和颜色. border-bottom 下边框属性 该CSS属性用来设定下边框宽度,风格和颜色. border-bottom-color 下边框颜色属性 该CSS属性用来设定下边框的颜色. ...

支士伯2005怎样用css设定下表框的宽度、样式、颜色 -
厉曹宽19485394979 ______ 请把问题讲得清楚一些,你说的表框是模块的边框还是表格的边框 如果是模块边框的话,就先弄懂这些参数和属性: none (没有边框,无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double ...

支士伯2005如何在css中设置菜单的边框颜色
厉曹宽19485394979 ______ select样式要想非常好看,单用CSS是实现不了的,必须要用到JS才行! 下面这个例子是CSS实现的效果: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...

支士伯2005在Dreamweaver中css边框颜色
厉曹宽19485394979 ______ <style type="text/css"> .css1 { border-style:solid; border-color:#006699; border-width:1px; width:50px; height:50px; } </style> <div class="css1"></div>内部外部都一样的改法,无非就要导入外部的CSS样式

支士伯2005如何用CSS设置滚动条颜色? -
厉曹宽19485394979 ______ 我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scrollbar-3d-light-color 设置或...

支士伯2005Dreamweaver中图象的边框怎么修改颜色 -
厉曹宽19485394979 ______ 一、边框颜色样式单词 - TOP border-color:#000(设置4边边框颜色为黑色) border-color:+颜色值,即可设置对象边框颜色 border-left-color:#000 设置左边框颜色为黑色 border-right-color:#000 设置右边框颜色为黑色 border-top-color:#000 设...

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024