CSS Border(边框).pdfVIP

CSS Border(边框) CSS 边框 CSS 边框属性 CSS边框属性允许你指定⼀个元素边框的样式和颜⾊。 边框样式 边框样式属性指定要显⽰什么样的边界。 border-style属性⽤来定义边框的样式 border-style 值: none: 默认 边框 dotted: dotted:定义⼀个点线框 dashed: 定义⼀个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width 的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜⾊值 ridge: 定义3D脊边界。效果取决于边界的颜⾊值 inset:定义⼀个3D的嵌⼊边框。效果取决于边界的颜⾊值 outset: 定义⼀个3D突出边框。 效果取决于边界的颜⾊值 尝试⼀下: 设置边框样式 边框宽度 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种⽅法：可以指定长度值，⽐如 2px 或 0 .1em ；或者使⽤ 3 个关 键字之⼀，它们分别是 thin 、medium （默认值） 和 thic 。 注意：CSS 没有定义 3 个关键字的具体宽度，所以⼀个⽤户代理可能把 thin 、medium 和 thic 分别设置为等于 5px 、3px 和 2px ，⽽另⼀个⽤户代理则分别设置为 3px 、2px 和 1px 。 实例 p .one { border-style:solid; border-width:5px; } p .two { border-style:solid; border-width:medium; } 尝试⼀下 » 边框颜⾊ border-color属性⽤于设置边框的颜⾊。可以设置的颜⾊： name - 指定颜⾊的名称，如 red RGB - 指定 RGB 值, 如 rgb(255,0 ,0) Hex - 指定16进制值, 如 #ff0000 您还可以设置边框的颜⾊为transparent。 注意： border-color单独使⽤是不起作⽤的，必须得先使⽤border-style来设置边框样 式。 实例 p .one { border-style:solid; border-color:red; } p .two { border-style:solid; border-color:#98bf2 1; } 尝试⼀下 » 边框-单独设置各边 在CSS 中，可以指定不同的侧⾯不同的边框： 实例 p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } 尝试⼀下 » 上⾯的例⼦也可以设置⼀个单⼀属性： 实例 border-style:dotted solid; 尝试⼀下 » border-style属性可以有1-4个值： border-style:dotted solid double dashed; 上边框是 dotted 右边框是 solid 底边框是 double 左边框是 dashed border-style:dotted solid double; 上边框是 dotted 右边框是 solid 底边框是 double border-style:dotted solid; 上、底边框是 dotted 右、左边框是 solid border-style:dotted; 四⾯边框是 dotted 上⾯的例⼦⽤了border-style 。然⽽，它也可以和border-width 、 border-color⼀起使 ⽤。 边框-简写属性 上⾯的例⼦⽤了很多属性来设置边框。 T你也可以在⼀个属性中设置边框。 你可以在border 属性中设置： border-width bord