border的属性值(bordertop属性)
border-radius属性是什么?
border-radius圆角边框是CSS3的新属性,以前网页设计开发中要实现元素的圆角边框,通常是用背景图片来实现的。
它是CSS3的新属性,兼容IE9+,Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器,对于一些较低版本的浏览器,我们可以添加相应的浏览器前缀来兼容。
border-radius可以同时设置1到4个值,(类似于margin与padding的值得设定)。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。
HTML中表格属性有哪些?
table width="800" border="0" align="center" cellpadding="0"
cellspacing="0"该标记标示表格的开始,该表格宽度为800像素,边框粗细为0( 即不显示边框 ),对齐方式"水平居中",单元格边距"0",单元格间距"0"。表格属性的设置及相关说明:border: 用于设置表格边框的粗细,属性值为数值,数值越大,框线越粗,如果设置border="0",则表示不显示表格框线background: 用于设置表格的背景图片,属性值为URL( 图片所在路径及图片文件的文件名 )例:table background="URL" !--设置表格背景图片-- cellspacing: 用于设置表格内框线宽度( 即单元格间距 ),属性值为数值( 单位为像素 ),数值越大,单元格间距越大,若未设置,默认值为2例:table cellspacing="1" !--设置表格中单元格间距为1-- cellpadding: 用于设置表格内文字与表格框线之间的间距( 单元格边距 ),属性值为数值( 单位为像素 ),数值越大,表格内文字与表格框线的间距越大,该属性的设置值必须是大于或等于0的正整数值,若未设置,默认值为1例:table cellpadding="0" !--设置表格中单元格边距为0-- width: 用于设置表格的宽度( 也可用于设置单元格td或th宽度 ),属性值可以是数值( 单位为像素 ),也可以是百分比( 相对于父级目标的比例值 ),数值越大,表示宽度越大( 注: 设置width属性时,可以先设置表格的宽度,再依次设置各单元格的宽度,也可以不设置表格的宽度,仅设置表格中各单元格的宽度 )例:table width="100" !--设置表格宽度为100像素--td width="20%" !--设置单元格宽度为所在表格宽度的20%-- height: 用于设置表格的高度( 也可用于设置单元格td或th高度 ),属性值可以是数值( 单位为像素 ),也可以是百分比( 相对于父级目标的比例值 ),数值越大,表示高度越大( 注: 设置height属性时,可以先设置表格的高度,再依次设置各单元格的高度,也可以不设置表格的宽度,仅设置表格中各单元格的高度 )例:td height="30" !--设置单元格高度为30像素-- bgcolor: 用于设置表格或单元格或表格中的行或列的背景颜色,属性值可以使用颜色名称,或使用三原色混色值例:table bgcolor="blue" !--设置表格背景颜色为蓝色--td bgcolor="black" !--设置单元格背景颜色为黑色-- align: 用于设置表格或单元格的对齐方式。在table标记中设置align属性用于设置表格的对齐方式,包括: center( 表格居中对齐 ),left( 表格左对齐,默认值 ),right( 表格右对齐 )。在行tr或单元格td或th标记中设置align属性用于设置单元格内文字的对齐方式,包括: center( 单元格内文字居中对齐 ),left( 单元格内文字左对齐,默认值 ),right( 单元格内文字右对齐 )valign: 用于设置单元格内文字垂直对齐方式,包括: top( 单元格内文字顶端对齐 ),middle( 单元格内文字垂直居中对齐,默认值 ),bottom( 单元格内文字底端对齐 ) tr表格中的行标记,tr即table row的缩写,tr标记为成对标记,用于设置表格中一行的开始和结束及该行的相关属性,表格中有多少行,则该表格的table…/table标记内就有多少对tr…/tr标记与之对应。例:tr valign="top"该标记标示行的开始,垂直对齐方式"顶端对齐"( 默认为垂直居中对齐 )。tr标记中的水平对齐属性:align="left"( 左对齐 ); align="center"( 居中 ); align="right"( 右对齐 )。tr标记中的垂直对齐属性:valign="top"( 顶端 ); valign="middle"( 居中 ); valign="bottom"( 靠下 )。 td表格中的字段( 列 )数据标记,td即table Data的缩写,td标记为成对标记,用于设置字段数据的开始和结束及字段的相关属性,表格中有多少列,则该表格的table…/table标记内就有多少对td…/td标记与之对应。例:td width="50%"该标记标示一个单元格的开始,该单元格宽度设置为父级目标宽度的50%。th表格中列标题( 字段名 )定义标记,th是Table Header的缩写,th标记为成对标记,用于设置表格的表头名称( 字段名 ),该标记内文字的对齐方式为水平居中且垂直居中,字体加粗。也可以在该标记内使用align和valign设置该字段内的对齐方式,其设置值的有效范围只限于该数据。在tr标记内,align和valign对该行中的所有字段均有效。bordertable标记中的属性之一,用于设置表格边框的粗细。Border属性值可用数值表示,其值为0或省略此项设置表示不显示边框,数值越大表示框线越粗。
CSS border(边框)样式写法总结
border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法:border: border-width | border-style | border-color;
border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。
?border-top-width:设置元素上边框宽度
?border-right-width:设置元素右边框宽度
?border-bottom-width:设置元素下边框宽度
?border-left-width:设置元素左边框宽度
border-style :边框样式。
?border-top-style:设置元素上边框样式
?border-right-style:设置元素右边框样式
?border-bottom-style:设置元素下边框样式
?border-left-style:设置元素左边框样式
?属性值有:
??none:无边框。
??hidden:隐藏边框。对于表,hidden 用于解决边框冲突。
??dotted:点状边框。
??dashed:虚线边框。
??solid:实线边框。
??double:双线边框。两条单线与其间隔的和等于指定的border-width值。
??groove:3D凹槽边框。
??ridge:3D垄状边框。
??inset:凹边框。
??outset:凸边框。
border-color :边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同,样式相同
1.4 四条边颜色相同,样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _