http://zhidian.wuute.com/html5dev/ 2026-05-20T19:09:39+09:00 http://zhidian.wuute.com/html5dev/ http://zhidian.wuute.com/html5dev/lib/tpl/bootstrap3_1/images/favicon.ico text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/border?rev=1492848031&do=diff border border 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 语法 border: border-width border: border-style border: border-color border: inherit 值 值描述border-width 此关键词表示边界属性的宽度。 text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottom?rev=1492848031&do=diff border-bottom border-bottom 该属性是用来将下边框的所有属性：border-bottom-color, border-bottom-style 与 border-bottom-width 设置到一个声明中。 语法 border-bottom: 20px; border-bottom: 4px dashed; border-bottom: top dashed red; 值 值描述<br-width> 此关键词表示边框的宽度。详见 text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottomcolor?rev=1492848031&do=diff border-bottom-color border-bottom-color该属性是用于规定一个元素底部边框的颜色。 语法 border-bottom-color: red; border-bottom-color: #342343; 值 值描述color 此关键词表示描绘底边的颜色CSS值。 inherit 此关键词代表父元素底边颜色的关键字（可能和 text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottomleftradius?rev=1492848031&do=diff border-bottom-left-radius border-bottom-left-radius 该属性用于规定元素的左下角边框的形状。 语法 border-bottom-left-radius: 2px; border-bottom-left-radius: 3em 2em; border-bottom-left-radius: inherit; 值 值描述<length-percentage> text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottomrightradius?rev=1492848031&do=diff border-bottom-right-radius border-bottom-right-radius 该属性用于规定元素的右下角边框的形状。 语法 border-bottom-right-radius: 2px; border-bottom-right-radius: 3em 2em; border-bottom-right-radius: inherit 值 值描述<length-percentage> text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottomstyle?rev=1492848031&do=diff border-bottom-style border-bottom-style该属性是规定元素下边框的样式。 语法 border-bottom-style: hidden; border-bottom-style: none; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: double; border-bottom-style: solid; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: groove; border-bottom-style: outset; border-bottom-style: inherit; text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderbottomwidth?rev=1492848031&do=diff border-bottom-width border-bottom-width 该属性是一个用于规定一个元素下边框的宽度。 语法 border-bottom-width: 20em; border-bottom-width: 3px; border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: inherit; text/html 2017-04-22T17:00:31+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordercolor?rev=1492848031&do=diff border-color border-color该属性是一个用于规定元素四个边框颜色的快捷属性：border-top-color，border-right-color，border-bottom-color，border-left-color。 语法 border-color: red border-color: red blue border-color: green yellow blue border-color: orange green blue red border-color: inherit 值 text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimage?rev=1492848032&do=diff border-image border-image 该属性用作给元素的边框添加背景图片。使用该属性时，会替换掉 border-style 属性所设置的边框样式。 语法 border-image: url("hudao.jpg") 20 20 repeat; 值 值描述image-source 此关键词表示图片的路径 text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimageoutset?rev=1492848032&do=diff border-image-outset border-image-outset属性规定边框图像可超出边框盒的大小。 语法 border-image-outset: 20%; border-image-outset: 10% 20%; border-image-outset: 20px 20% 12px; border-image-outset: 1px 2px 3px 4px; border-image-outset: inherit text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimagerepeat?rev=1492848032&do=diff border-image-repeat border-image-repeat 该属性用于规定图片如何填充边框。单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。 语法 border-image-repeat: type; border-image-repeat: horizontal vertical; border-image-repeat: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimageslice?rev=1492848032&do=diff border-image-slice 该属性规定图像边框向内偏移。 语法 border-image-slice: 50%; border-image-slice: 20% 10%; border-image-slice: 20 10% 20; border-image-slice: 12 23 21 32; border-image-slice: 23% fill 12 12; border-image-slice: initial; border-image-slice: unset; border-image-slice: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimagesource?rev=1492848032&do=diff border-image-source border-image-source 该属性规定<image>代替边框的样式。若此属性设置为none，使用边框样式代替。 语法 border-image-source: url(images.jpg); border-image-source: none; border-image-source: inherit; border-image-source: unset; border-image-source: linear-gradient(to top, red, yellow); text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderimagewidth?rev=1492848032&do=diff border-image-width border-image-width 该属性用作规定图像边框宽度。若 border-image-width 大于已指定的 border-width 则将向内部扩展。 语法 border-image-width: vertical horizontal; border-image-width: top horizontal bottom; border-image-width: top right bottom left; border-image-width: all; border-image-width: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderleft?rev=1492848032&do=diff border-left border-left 该属性规定元素的左边框属性。 语法 border-left: 3px; border-left: 4px dashed; border-left: top solid red; 值 值描述<br-width> 此关键词表示边框的宽度。详见 border-left-width <br-style> 此关键词表示边框的样式。详见 text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderleftcolor?rev=1492848032&do=diff border-left-color border-left-color 该属性是一个用于规定元素的左边框的颜色。 语法 border-left-color: green; border-left-color: rgb(0, 0, 0); border-left-color: transparent; border-left-color: currentColor; border-left-color: #322; border-left-color: hsla(20%, 23%, 23%, 43%); border-left-color: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderleftstyle?rev=1492848032&do=diff border-left-style border-left-style 该属性是一个用于设置各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 语法 border-left-style: none; border-left-style: dotted; border-left-style: hidden; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; border-left-style: inherit;… text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderradius?rev=1492848032&do=diff border-radius border-radius 该属性用作规定边框圆角。一个半径确定一个圆形；当使用两个半径时确定一个椭圆，该椭圆同边框的交集形成圆角效果。 语法 border-radius: radius border-radius: top-left-and-bottom-right top-right-and-bottom-left border-radius: top-left top-right-and-bottom-left bottom-right border-radius: top-left top-right bottom-right bottom-left border-radius: (first radius values) / radius border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left border-radius: (first radius value… text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderright?rev=1492848032&do=diff border-right border-right 该属性是元素的右边框属性。 语法 border-right: 4px; border-right: 4px dashed; border-right: top dashed green; 值 值描述<br-width> 此关键词表示边框的宽度。 <br-style> 此关键词表示边框的样式。 text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderrightcolor?rev=1492848032&do=diff border-right-color border-right-color 该属性是用于规定元素的右边框的颜色。 语法 border-right-color: green; border-right-color: rgb(233,232,12); border-right-color: hsla(12%, 23%, 45%, 0.78); border-right-color: #333; border-right-color: currentColor; border-right-color: transparent; border-right-color: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderrightstyle?rev=1492848032&do=diff border-right-style border-right-style 该属性是用于规定元素右边框的样式。 语法 border-right-style: hidden; border-right-style: dotted; border-right-style: solid; border-right-style: dashed; border-right-style: double; border-right-style: ridge; border-right-style: groove; border-right-style: inset; border-right-style: outset; border-right-style: none; border-right-style: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderrightwidth?rev=1492848032&do=diff border-right-width border-right-width 该属性是用于规定元素右边框的宽度。 语法 border-right-width: 3em; border-right-width: 4vmax; border-right-width: 3px; border-right-width: medium; border-right-width: thick; border-right-width: thin; border-right-width: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderstyle?rev=1492848032&do=diff border-style border-style 该属性是用作规定元素所有边框的样式。 语法 border-style: dashed border-style: dotted dashed border-style: hidden solid dashed border-style: none solid dashed none border-style: inherit border-style: initial border-style: unset text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertop?rev=1492848032&do=diff border-top border-top 该属性表示元素的上边框属性。 语法 border-top: 4px; border-top: 4px dashed; border-top: medium solid red; 值 值描述<br-width> 此关键词表示边框的宽度。 <br-style> 此关键词表示边框的样式。 text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertopcolor?rev=1492848032&do=diff border-top-color 该属性是用于设置元素的上边框的颜色。 语法 border-top-color: green; border-top-color: rgb(0, 3, 23); border-top-color: hsla(20%, 12%, 25%, 0.54); border-top-color: #232; border-top-color: currentColor; border-top-color: transparent; border-top-color: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertopleftradius?rev=1492848032&do=diff border-top-left-radius border-top-left-radius 该属性是用来规定元素左上角的圆角效果。圆角可以是圆或者椭圆的一部分。若其中有一个值为0，则无圆角效果。 语法 border-top-left-radius: 2px; border-top-left-radius: 0.2em 2em; border-top-left-radius: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertoprightradius?rev=1492848032&do=diff border-top-right-radius border-top-right-radius 该属性用于规定元素的右上角弧形。该弧形可能为一个椭圆，若一个值为0，就没有圆形。 语法 border-top-right-radius: radius; border-top-right-radius: horizontal vertical; border-top-right-radius: inherit; text/html 2017-04-22T17:00:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertopstyle?rev=1492848032&do=diff border-top-style border-top-style 该属性是用于规定元素的上边框的样式。 语法 border-top-style: hidden; border-top-style: dotted; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: dashed; border-top-style: ridge; border-top-style: inset; border-top-style: outset; border-top-style: none; border-top-style: inherit; text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/bordertopwidth?rev=1492848033&do=diff border-top-width border-top-width 该属性是用于规定元素的上边框的宽度。 语法 border-top-width: 3em; border-top-width: 4vmax; border-top-width: 3px; border-top-width: medium; border-top-width: thick; border-top-width: thin; border-top-width: inherit; text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/borderwidth?rev=1492848033&do=diff border-width border-width 该属性是用于规定元素四条边框的宽度。 语法 border-width: 3px; border-width: 2px 1px; border-width: 1px 2em 2cm; border-width: 2px 2em 02rem; border-width: inherit; 值 值描述<br-width> 此关键词表示边框的宽度。 text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/boxshadow?rev=1492848033&do=diff box-shadow box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果，几乎可用到任何元素。若同时在元素上设置了border-radius，阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。 语法 text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/outline?rev=1492848033&do=diff outline outline 该属性是用于规定元素的轮廓属性。 语法 outline: 3px solid red; 值 值描述<'outline-width'> 此关键词表示轮廓属性的宽度。详见 outline-width <'outline-style'> 此关键词表示轮廓属性的样式。详见 outline-style <'outline-color'> text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/outlinecolor?rev=1492848033&do=diff outline-color outline-color 该属性是用于规定元素的轮廓的颜色。 语法 outline-color: red; outline-color: invert; outline-color: inherit; outline-color: initial; outline-color: unset; 值 值描述<color> 此关键词表示元素轮廓的颜色。 text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/outlinestyle?rev=1492848033&do=diff outline-style outline-style 该属性是用于规定元素的轮廓样式属性。 语法 outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; outline-style: initial; outline-style: unset; outline-style: inherit; text/html 2017-04-22T17:00:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/outlinewidth?rev=1492848033&do=diff outline-width outline-width 该属性是用于规定元素的轮廓的宽度。 语法 outline-width: thin; outline-width: medium; outline-width: thick; outline-width: 4px; outline-width: 3em; outline-width: inherit; 值 值描述thin 此关键词通常表示是1px。 text/html 2017-04-23T20:39:16+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/86/48/start?rev=1492947556&do=diff 边框 定义 边框(Border）属性是对HTML元素的边框进行定义的CSS属性。 概述 通过边框的样式设置，给元素增加更丰富的外观 边框的设置包含以下内容: * 边框的类型 * 边框的尺寸 * 边框的前景背景