zoukankan      html  css  js  c++  java
  • CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化。下面的例子可以证明:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border-radius: 20px;
                background: #f00;
                margin: 100px;
                outline: 10px solid #00f;    
            }
    
            .div3{
                outline: none;
                box-shadow: 0 0 0 10px green;
            }
        </style>
    </head>
    <body>
        <div class="div3"></div>
    </body>
    </html>

    效果:

    *而实现内圆角边框(外边框为直角)就可利用以上特性(box-shaodw填充outline和border之间的空白),代码如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border-radius: 20px;
                background: #f00;
                margin: 100px;
                outline: 10px solid #00f;    
            }
            .div1{
                box-shadow: 0 0 0 10px #ff0;
            }
            .div2{
                box-shadow: 0 0 0 10px #00f;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
    </html>

    div1 效果:

    div2效果:

    喜欢请推荐,转载请标明出处。

  • 相关阅读:
    windows +xampp+wordpress
    IP 包类型
    [二叉树]已知后序/中序遍历,求先序遍历
    QT 设置应用程序图标
    Nginx 优化 Alex
    编译安装REDIS Alex
    Http简介 Alex
    Nginx调试 Alex
    利用私有CA 给内部https网站颁发证书 Alex
    实现https安全网站之自签名证书 Alex
  • 原文地址:https://www.cnblogs.com/pomelott/p/6952881.html
Copyright © 2011-2022 走看看