争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

如何迅速容易的使用css3画出各种各样的椭圆

时间:2024/2/13作者:未知来源:争怎路由网人气:

%;

  • 浏览器兼容性:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

  • 使用css3画出各种各样的椭圆的代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    #rcorners1 {
        border-radius: 50px/15px;
        background: #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }
    #rcorners2{
        border-radius: 15px/50px;
        background: #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }
    #rcorners3 {
        border-radius: 50%;
        background: #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px;
    } 
    </style>
    </head>
    <body>

    实例效果如图所示

    微信截图_20180929095127.png

    微信截图_20180929095134.png

    微信截图_20180929095145.png

    应用:使用css3画出椭圆后插入图片

    <!DOCTYPE html>  
    <html>  
    <head>  
    <style>  
    img {   
        border-radius: 50%;   
    }   
    </style>  
    </head>  
    <body>  
    <h2>椭圆形图片</h2>  
    <p>使用 border-radius 属性来创建椭圆形图片:</p>  
    <img src="paris.jpg" alt="Paris" width="400" height="300">  
    </body>  
    </html>

    实例效果如图所示

    微信截图_20180929102949.png

    以上就是如何快速简单的使用css3画出各种各样的椭圆的详细内容,更多请关注php中文网其它相关文章!


    网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    关键词:如何迅速容易的运用css3画出各种各样的椭圆




    Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

    免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

    QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版