• css(2)---倒角阴影 框模型


    边框的倒角(圆角)

    【将直角倒成圆角】

    border-radius:50%

    取值     以px为单位的数字

        %       设置圆形(50%)

    单角设置:

    使用两条边去确认一个角,先写上下后写左右

    border-top-left:左上   

    border-top-right:右上

    border-bottom-left:左下

    border-bottom-right:右下

    【例子:画柠檬】

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .d1{
                width: 200px;
                height: 200px;
                background: #ff0;
                border-radius: 20px;
                border-top-left-radius: 70%;
                border-bottom-right-radius: 70%;
            }
        </style>
    </head>
    <body>
        <div class="d1"></div>
    </body>
    </html>

    边框阴影

    box-shadow: a b c d color;

    a——x轴的偏移量:10px

    b——Y轴的偏移量: 10px

    c——阴影的模糊距离,可选值,越大模糊距离越明显

    d——阴影的尺寸,指定要在基础阴影上扩出的大小

    color——阴影颜色;

    inset:把默认的外部阴影设置为内部阴影

  • 相关阅读:
    putty配色方案
    LDAP
    cmder显示UTF-8字体
    CentOS Linux release 7.2.1511 (Core)
    扩展欧几里得算法
    Chinese remainder theorem
    弹琴吧
    RSA DH
    iOS 和 Android 的后台推送原理各是什么?有什么区别?
    Codelite安装详解
  • 原文地址:https://www.cnblogs.com/hd-test/p/11907643.html
Copyright © 2020-2023  润新知