zoukankan      html  css  js  c++  java
  • css斜切角 斜边 倒角

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height">
        <title>css斜切角 斜边 倒角</title>
        <style>
        .m-test {
             100px;
            height: 16px;
            background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
                linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
                linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
                linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
        </style>
    </head>
    
    <body>
        <div class="m-test"></div>
    </body>
    
    </html>

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height">
        <title>css斜切角 斜边 倒角</title>
        <style>
        .m-test {
             100px;
            height: 16px;
            background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
                linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
                linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
                linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
        </style>
    </head>
     
    <body>
        <div class="m-test"></div>
    </body>
     
    </html>
  • 相关阅读:
    layui多选框
    js获取html5 audio 音频时长方法
    危害程序员职业生涯的三大观念
    选择器
    C++ STL partial_sort
    C++ STL sort
    C++ STL 排列 next_permutation prev_permutation
    C++ STL 逆转旋转 reverse reverse_copy rotate
    C++ unique
    C++ remove remove_if erase
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924756.html
Copyright © 2011-2022 走看看