通过CSS3可以给盒子创建边框、边框圆角与边框图片:
border:2px solid red；
第一个代表边框width，第二个表示边框的style，第三个则表示边框color，也可分开写。如下例：
<html>
<head>
<style type="text/css">
p{
text-align:center;
width:500px;
}
.p1{
border:5px solid gray}
.p2{
border:5px dotted gray}
.p3{
border:5px dashed gray}
.p4{
border:5px double gray}
.p5{
border:5px groove gray}
.p6{
border:5px ridge gray}
.p7{
border:5px inset gray}
.p8{
border:5px outset gray}
</style>
</head>
<body>
<p class="p1">实线</p>
<p class="p2">一串方形点（方形宽度就是border的宽度）</p>
<p class="p3">虚线</p>
<p class="p4">两条实线</p>
<p class="p5">雕入页面</p>
<p class="p6">凸起</p>
<p class="p7">嵌入页面</p>
<p class="p8">突出页面</p>
</body>
</html>
border-radius:25px 50px 50px 50px/50px 25px 50px 100px；
后面的数字是设置圆角的大小，参数分别代表左上角、右上角、右下角、左下角，“/”之后表示垂直（Y轴）半径，没有则表示与水平半径一样。
看下列就能一目了然了：
<!DOCTYPE html>
<html>
<head>
<style>
.div1
{
margin:30px;
text-align:center;
border:2px solid red;
width:200px;
height:150px;
border-radius:50px;
}
.div2
{
margin:30px;
text-align:center;
border:2px solid red;
width:200px;
height:100px;
border-radius:20px 30px 40px 50px;
}
.div3
{
margin:30px;
text-align:center;
border:2px solid red;
width:200px;
height:100px;
border-radius:20px 30px 40px 50px/30px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="div1">四个圆角相同</div>
<div class="div2">四个圆角不同</div>
<div class="div3">四个圆角不同且水平与垂直方向也不同</div>
</body>
</html>
border-image:url(/i/border.png) 30 30 round;
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
