zoukankan      html  css  js  c++  java
  • 多拉A梦的CSS(3) border radius

    圆角是网页制作大杀器之一。
    border radius就是大杀器的克星。

    基本

    新建一htm,并复制以下代码。

    <style type="text/css">

    .showbox {
    150px;
    height:150px;
    margin:100px;
    border:1px green solid;
    -webkit-border-radius:30px;   /*for Safari*/
    -moz-border-radius:30px;   /*for FF*/
    }

    </style>

    <div class="showbox">box 1</div>

    以FF观看,效果如下。

    box1的四角变成了以30px为半径的圆角。

    进一步:为四角分别设置


    /*FF*/
    -moz-border-radius-topleft : 30px;
    -moz-border-radius-topright : 10px;
    -moz-border-radius-bottomleft : 20px;
    -moz-border-radius-bottomright : 40px;
    /*Safari*/
    -webkit-border-top-left-radius : 30px;
    -webkit-border-top-right-radius : 10px;
    -webkit-border-bottom-left-radius : 20px;
    -webkit-border-bottom-right-radius : 40px;

    效果如下:

    设置圆角为椭圆

    -webkit-border-radius:30px 60px;   /*for Safari*/
    -moz-border-radius:30px 60px;   /*for FF,也可用斜杠隔开,形如“30px/60px”*/


    同样也可以对四个角分别设置椭圆。


    多拉A梦的border radius

    head-light中

    -webkit-border-radius:45px;
    -moz-border-radius:60px;
  • 相关阅读:
    火星A+B
    分西瓜(DFS)
    H.数7(模拟)
    镜像树(dfs)
    锐雯上单不给就送(矩阵快速幂)
    STL容器
    优先队列(和fence repair完全一样)
    x位全排列(next_permutation)
    fence repair(队列水过)
    线段相交
  • 原文地址:https://www.cnblogs.com/mumuliang/p/1873552.html
Copyright © 2011-2022 走看看