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边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _
1、首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签:
2、然后设置p标签的样式,这里先设置一个边框,然后设置圆角边框,主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值,不可为负值,这里圆角的值越大,圆角的弧度也越大:
3、最后打开浏览器,就可以看到圆角边框了:
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
和宽度一样,color也提供四个方向的样式,可以分别指定颜色
可选值:
style也可以分别指定四个边的边框样式,规则和width一致,
同时它也提供border-xxx-style四个样式,来分别设置四个边
示例:
边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
style="border:1px solid #000000;" \x0d\x0a总共三个参数:\x0d\x0a1px代表边框为1像素;\x0d\x0asolid是边框样式,细线;\x0d\x0a#000000是边框颜色;\x0d\x0a你可以根据你自己的需求进行相应的更改!