首页 > > 网页制作 > css >

css3神奇的圆角边框、阴影框及其图片边框

2020-02-02 16:01:10来源：博客园阅读 ()

css3神奇的圆角边框、阴影框及其图片边框

css3圆角，建议IE10以上

如果border-radius 单位是百分比，则参考为自身宽高，因此当宽高不一致时，圆角为不规则形状

如果border-radius 为50%，则为椭圆；当宽高一致时，则为正圆

单独设置每个圆角：

四个值： border-radius：左上角右上角右下角左下角

三个值： border-radius：左上角右上角+左下角 右下角

两个值： border-radius：左上角+右下角 右上角+左下角

兼容浏览器前缀

谷歌 -webkit-

火狐 -moz-

IE -ms-

欧朋 -o-

气泡对话框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width:500px;
        height:300px;
        border:1px solid #000;
        position: relative;
        font-size:24px;
        line-height: 300px;
        text-align:center;
        -webkit-border-radius:50%;
           -moz-border-radius:50%;
            -ms-border-radius:50%;
             -o-border-radius:50%;
                border-radius:50%;
    }
    div::before,
    div::after{
        content:'';
        display: block;
        position: absolute;
        border:1px solid #000;
        -webkit-border-radius:50%;
           -moz-border-radius:50%;
            -ms-border-radius:50%;
             -o-border-radius:50%;
                border-radius:50%;
    }
    div::before{
        width:50px;
        height:50px;
        right:50px;
        bottom:-25px;
    }
    div::after{
        width:30px;
        height:30px;
        right:25px;
        bottom:-50px;
    }
</style>
</head>
<body>
    <div>这是一段气泡对话框</div>
</body>
</html>

box-shadow:水平偏移垂直偏移模糊扩展颜色位置

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        box-shadow:10px 10px 5px 0 #bbb;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

border-image 欧朋浏览器和IE浏览器不兼容

首先准备border.png

演示效果1：

图片铺满整个边框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        border:30px solid black;
        border-image:url(source/border.png) 30 30 round;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

演示效果2：

图片被拉伸来铺满边框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        border:30px solid black;
        border-image:url(source/border.png) 30 30 stretch;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>