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;
  • 相关阅读:
    2.由浅入深解析 SimpleDateFormat
    7.如何在Maven项目中引入自己的jar包
    6.Java英文缩写详解
    6.JXL操作Excel
    5.Apache POI使用详解
    4.Properties文件的加载和使用
    3.java.util.logging.Logger使用详解
    2.使用dom4j解析XML文件
    jdk、jre、spring、java ee、java se
    JVM架构
  • 原文地址:https://www.cnblogs.com/mumuliang/p/1873552.html
Copyright © 2011-2022 走看看