zoukankan      html  css  js  c++  java
  • CSS3的圆角Border-radius

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS3的圆角Border-radius</title>
    <style>
    body{margin: 0;padding: 100px;}
    .example{
        width: 150px;
        height: 80px;
        border: 20px solid #ccc;
        margin: 5px;
        float: left;
    }
    .example1{
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .example2{
        -webkit-border-radius: 10px 80px;
        -moz-border-radius: 10px 80px;
        border-radius: 10px 80px;
    }
    .example3{
        -webkit-border-radius: 0px 20px 50px 100px;
        -moz-border-radius: 0px 20px 50px 100px;
        border-radius: 0px 20px 50px 100px;
    }
    .example4{
        -webkit-border-radius: 130px 0;
        -moz-border-radius: 130px 0;
        border-radius: 130px 0;
    }
    .example5{
        /* “/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径 */
        -webkit-border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
        -moz-border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
        border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
    }
    </style>
    </head>
    <body>
        <div class="example example1"></div>
        <div class="example example2"></div>
        <div class="example example3"></div>
        <div class="example example4"></div>
        <div class="example example5"></div>
    </body>
    </html>

    如下图所示:

    了解更多http://www.w3cplus.com/css3/border-radius

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    hdu 1260 Tickets
    hdu 4738 Caocao's Bridges(桥的最小权值+去重)
    找规律
    C语言快速排序
    数组的初始化方法
    C语言选择排序
    副本机制
    安装完Kali的后续操作
    Bool盲注
    Python中的列表
  • 原文地址:https://www.cnblogs.com/baixc/p/3720136.html
Copyright © 2011-2022 走看看