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;
  • 相关阅读:
    CentOS6.5配置网络
    php curl 总结
    laravel-5-doctrine-2 教程
    DOS 总结
    Centos如何通过yum安装php7
    sql with 写法
    php 汉字转拼音函数
    MYSQL 升序排序但值为0的排最后
    zookeeper基础知识
    初识redis
  • 原文地址:https://www.cnblogs.com/mumuliang/p/1873552.html
Copyright © 2011-2022 走看看