zoukankan html css js c++ java

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>

查看全文

相关阅读:
Python(条件判断和循环)
大端还是小端
 c语言程序设计字符串拷贝拷贝演变与初衷
 内存匹配串
 多态 C2
多态 C1
判断是否存在不合法字符（C++）
va_start、vsprintf、va_end
java中instanceof用法
 c++ vector相关

原文地址：https://www.cnblogs.com/chenyingying0/p/12252018.html