单独设置div的边框样式

首页 >> 正文

单独设置div的边框样式

来源：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":"pika","pub_time":1697936940000,"pure":"","rawurl":"http://zm.news.so.com/8285fe57e30f0b5073ccc1eb3ef615de","redirect":0,"rptid":"b035694a61091705","rss_ext":[],"s":"t","src":"三七一网络","tag":[],"title":"在网页制作中合理应用网页边框的样式属性

盖歪脉1164div 中如何加各种边框 -
臧武香15866243926 ______ <div class=＂box＂> <h1>边框</h1></div>.box{ border: 1px solid #000000;}1px是边框粗细,solid是边框样式,#000000是边框颜色不同边框样式效果看下图↓

盖歪脉1164div+css中层的边框大小可以设置吗 -
臧武香15866243926 ______ div+css中层的边框大小可以设置的,我们需要给这个div,width和height,然后在使用border来实现对边框的操作,boder:4px solid #f00;它的意思就是边框的宽度是4px,实线的,颜色是红色的,我们通过代码来理解下: <html> <head> <style> ...

盖歪脉1164怎样在css中给文章加边框? -
臧武香15866243926 ______ 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. 观察显示效果

盖歪脉1164css中给加边框的问题 -
臧武香15866243926 ______ 有两种方法; 一是给div设置全部边框再隐藏上边框 div{border:1px solid #000; border-top:none;} 二是分别给左右下写边框 div{border-left:{1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000;} 要是你三边的边框样式一致的话建议用第一种,不一致的话用第二种,方便单独设置每个边框样式

盖歪脉1164div设置宽高(div默认宽度)
臧武香15866243926 ______ div默认宽度在头部标签前面输入width就是div的宽度,height就是div的高度,px值是单位,想设置不同的宽度和高度只需要改变width和height的数值就行了div如何根据实际...

盖歪脉1164div设置border上边框没有 -
臧武香15866243926 ______ 你的定位,宽高限制,背景、边框颜色等因素都有可能影响,只有看到代码才能给你解决啊.

盖歪脉1164怎么用CSS设置html中的表格边框样式 -
臧武香15866243926 ______ 代码示例<style>.a { border:#000 3px solid;</style><div class=＂a＂></div>其中CSS中border属性为边框线属性第一个值设置边框线颜色,可为颜色英文单词或16进制代码第二个值设置边框线粗细第三个值设置线体样式 solid为实线 dotted为点线 double为双边框线还有个虚线

盖歪脉1164如何让一个DIV不使用任何样式? -
臧武香15866243926 ______ 有些样式会继承父容器的样式的,你要去掉它只能给它重新定义到你真正想要的了.

（编辑：自媒体）