<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d4684235500622716427\x26blogName\x3dCaiwangqin\x27s+blog\x26publishMode\x3dPUBLISH_MODE_HOSTED\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://blog.caiwangqin.com/search\x26blogLocale\x3dzh_CN\x26v\x3d2\x26homepageUrl\x3dhttp://blog.caiwangqin.com/\x26vt\x3d3393395200455623441', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Caiwangqin's blog

Focus on Life, Cloud Service, Smart Hardware, Architecture, Technic and beyond…

Rounded corners


Rounded corners

Our rounded corners implementation is based on three different works:


took these, combined them, stripped some functionality (kept antialiasing) and simplified the API. There is one

restriction: only DIVs can be rounded with this implementation, which

suited us fine, and made the code a bit shorter.


You have to attach a class “rounded” to the divs you want round.

Here’s the Javascript that you have to add to the end of your html page:

<script type=“text/javascript”>Rounded(’rounded’, 6, 6);script>

The first parameter, “rounded” stands for the classname

which is used to mark the divs that we want to make round. The other two

parameters are the radius of the corners, the bigger the number, the

rounder you will get.


posted by Caiwangqin, 05:52



订阅 博文评论 [Atom]

<< 主页