• 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:把默认的外部阴影设置为内部阴影

  • 相关阅读:
    原型链
    原型规则总结
    使用typeof能得到的哪些类型
    eslint 规则中文注释
    两张图片互相切换
    输入框获得焦点与失去焦点、阴影效果
    vue 写table的几种方式
    vue 注意事项
    angular 接口定义封装
    @NgModule
  • 原文地址:https://www.cnblogs.com/hd-test/p/11907643.html
Copyright © 2020-2023  润新知