border属性(CSS设置四个边框样式)
CSSborder是操控对象的边框边线宽度、色彩、虚线、实线bai等款式CSS特点。
在表格中：border='1'表示表格边框宽度为1px，css色彩为黑色，默认为实线款式边
1、border边框语法:
（1）border-left设置左边框，一般独自设置左边框款式运用
（2）border-right设置右边框，一般独自设置右边框款式运用
（3）border-top设置上边框，一般独自设置上边框款式运用
（4）border-bottom设置下边框，一般独自设置下边框款式运用,有时可将下边框款式作为css下划线效果应用。
2、border边框语法:
（1）四边相同边框border简写:
#divcss5{border:1pxsolid#00F}
设置了divcss5对象盒子5px像素蓝色实线边框
（2）边框三个款式:
1）、边框色彩：border-color:#000
2）、边框厚度（宽度）：border-width:1px
3）、border边框款式：border-style:solid
（3）边框款式值如下：
none:无边框。与任何指定的border-width值无关
dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid:实线边框（常用）
double:双线边框。两条单线与其间隔的和等于指定的border-width值
（4）CSS独自设置左边框、右边框、上边框、下边框:
1）、1px黑色虚线上边框：border-top:1pxdashed#000
2）、1px黑色实线下边框：border-bottom:1pxsolid#000
3）、1px黑色虚线左边框：border-left:1pxdashed#000
4）、1px黑色实线右边框：border-right:1pxsolid#000
CSS设置四个边框样式
.angle{
position:absolute;
width:20px;
height:20px;
}
.angle-left-top{
top:0;
left:0;
border-left:4pxsolidrgba(7,185,255,0.5);
border-top:4pxsolidrgba(7,185,255,0.5);
}
.angle-left-top:after{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
top:-4px;
right:0;
border-left:4pxsolidtransparent;
border-right:4pxsolidrgb(28,32,122);
border-bottom:4pxsolidrgb(28,32,122);;
}
.angle-left-top:before{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
bottom:0;
left:-4px;
border-top:4pxsolidtransparent;
border-right:4pxsolidrgb(28,32,122);
border-bottom:4pxsolidrgb(28,32,122);;
}
.angle-right-top{
top:0;
right:-2px;
border-right:4pxsolidrgba(7,185,255,0.5);
border-top:4pxsolidrgba(7,185,255,0.5);
}
.angle-right-top:after{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
bottom:0;
right:-4px;
border-right:4pxsolidtransparent;
border-left:4pxsolidrgb(28,32,122);
border-bottom:4pxsolidrgb(28,32,122);;
}
.angle-right-top:before{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
top:-4px;
left:0;
border-top:4pxsolidtransparent;
border-left:4pxsolidrgb(28,32,122);
border-bottom:4pxsolidrgb(28,32,122);;
}
.angle-left-bottom{
bottom:0;
left:0;
border-bottom:4pxsolidrgba(7,185,255,0.5);
border-left:4pxsolidrgba(7,185,255,0.5);
}
.angle-left-bottom:after{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
bottom:-4px;
right:0;
border-left:4pxsolidtransparent;
border-top:4pxsolidrgb(28,32,122);
border-right:4pxsolidrgb(28,32,122);;
}
.angle-left-bottom:before{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
top:0;
left:-4px;
border-left:4pxsolidtransparent;
border-top:4pxsolidrgb(28,32,122);
border-right:4pxsolidrgb(28,32,122);;
}
.angle-right-bottom{
bottom:0;
right:-2px;
border-right:4pxsolidrgba(7,185,255,0.5);
border-bottom:4pxsolidrgba(7,185,255,0.5);
}
.angle-right-bottom:after{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
bottom:-4px;
left:0;
border-right:4pxsolidtransparent;
border-top:4pxsolidrgb(28,32,122);
border-left:4pxsolidrgb(28,32,122);;
}
.angle-right-bottom:before{
content:"";
border-radius:0;
font-size:0;
width:0;
height:0;
position:absolute;
padding:0;
top:0;
right:-4px;
border-right:4pxsolidtransparent;
border-top:4pxsolidrgb(28,32,122);
border-left:4pxsolidrgb(28,32,122);;
}
作品标签： border属性
优秀作品：
最新作品：
评论列表（共128人参与）参与讨论或分享设计作品获得视觉癖积分奖励
度端午佳节注册会员
2020-12-02 17:43:3
" src="/uploads/allimg/201207/1-20120GT615.jpg" style="height: 154px; width: 400px;" /> 204100600.jpg" style="height: 275px; width: 400px;
回复去找 1注册会员
2020-12-02 17:43:50
设计师都知道游客
2020-12-02 1:9:30
游客91907：border属性(CSt="ps抠图头发1" src="/uploads/allimg/201207/1-20120G53229.jpg" /> 操练素材： ） 2、民营大老板：了解过网站，熟识度也不高；但是它本身的营销赢利就很高了，维护的新老客户很多，现已忙不过来了；做不做网站都是
回复
有时分我注册会员
2020-12-02 22:23:15
用 （3）border-top设置上边框，一般独自设置上边框款式运更容易的学会如何分化高面或复杂模型。 3.3DSMAX2012为了让更多的人不需求担心烘托与灯光的设置问题，在此版本里加入了一
回复