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"headmeta charset="UTF-8"title>Document</style>
    div{
        width:500px;
        height300px
        border1px solid #000
        position relative
        font-size24px
        line-height 300px
        text-aligncenter
        -webkit-border-radius50%
           -moz-border-radius
            -ms-border-radius
             -o-border-radius
                border-radius;
    }
    div::before,div::after
        content''
        display block absolute
    div::before50px
        right
        bottom-25px
    div::after30px25px-50px}
body>
    div>这是一段气泡对话框html>

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

 200px
        background-color #f0f
        margin0 auto
        box-shadow10px 10px 5px 0 #bbb></>

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

首先准备border.png

演示效果1：

图片铺满整个边框

30px solid black
        border-imageurl(source/border.png) 30 30 round>

演示效果2：

图片被拉伸来铺满边框

url(source/border.png) 30 30 stretch>

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

相关文章