189 8069 5689

css边框属性详细总结-创新互联

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线.

创新互联是一家专注于成都做网站、网站设计与策划设计,溧水网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:溧水等地区。溧水做网站价格咨询:028-86922220

边框的样式 (border-style)

样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。

a,css 边框样式分为10种不同的非inherit样式:如下:

统一风格

1,none 无边框

2,solid 直线边框

3,dashed 虚线边框

4,dotted 点状边框

5,double 双虚线边框

6,groove 凸槽边框

7,ridge 垄状边框

8,inset  inset边框

9,outset outset边框

10,inherit继承

b,定义单边样式 分为以下4种样式

单独风格

1,border-bottom-style 下边边框样式

2,border-top-style  上边边框样式

3,border-left-style  左边边框样式

4,border-right-style  右边边框样式

因此这两种方法是等价的:

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。

边框宽度(border-width)

统一风格

border-width属性值:

1,thin 细边框

2,medium中等边框

3,thick粗边框

4,px固定值边框

5,inherit 继承

p {

border-style: solid;

border-width: thick;

}

等同于

p {

border-style: solid;

 border-width: 5px;

}

单边宽度

p {

border-style: solid;

border-width: 15px 5px 15px 5px;

}

也等同于

p {

 border-style: solid;

 border-top-width: 15px;

 border-right-width: 5px;

 border-bottom-width: 15px;

 border-left-width: 5px;

 }

边框颜色(border-color)

统一风格

p {

 border-style: solid;

 border-color: blue red;

 }

单独风格

1,border-top-color   上边框颜色

2,border-bottom-color  下边框颜色

3,border-left-color  左边框颜色

4,border-right-color  有边框颜色

h2 {

 border-style: solid;

 border-color: black;

 border-right-color: red;

 }

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:css边框属性详细总结-创新互联
当前地址:http://jkwzsj.com/article/jjppo.html

其他资讯