css怎么设置上边框(2)-木庄网络博客

当前第2页返回上一页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
            width: 100px;
            height:200px;
            border:solid 2px red;
            border-radius: 20px/10px
            }
        </style>
    </head>
    <body>
        <div>
 
        </div>
    </body>
</html>

　　一对或者一个属性值时，四个圆角是一样的，两个属性值时第一个属性值对应的是左上和右下，第二个对应的是右上和左下，三个属性值时对应的是左上、（右上、左下）、右下。四个属性值的时候是顺时针方向。

　　5、图像边框

　　图片边框的浏览器兼容并不好，很多时候下需要在属性前面加上浏览器厂商前缀。为了提供更好的兼容性，建议按下面的方式使用。

　　a、border-image-source

　　必须使用url功能指定图像来源。

　　b、border-image-slice属性

　　该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 500px;
                height: 400px;
                background: red;
                 /*border-image-source:url(1.png);
                 border-image-slice:89;
                 border-image-width: 89px;
                 border-image-repeat: stretch;
                 border-image-outset: 10px;*/
                 border-image:url(1.png) 89 30 89 30 fill/89px repeat
            }
        </style>
    </head>
    <body>
        <div>
 
        </div>
    </body>
</html>