CSS3圆角

来源：互联网发布：sql 循环insert 编辑：程序博客网时间：2024/04/29 13:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery-1.8.0.min.js"></script><style type="text/css">div{width:100px;height:100px;border:2px red solid;}div:nth-of-type(1){/*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/border-radius:100px;/*50%*/}div:nth-of-type(2){border-radius:100px 75px 50px 25px;}div:nth-of-type(3){border-radius:100px 0;}div:nth-of-type(4){border-radius:100px 100px 0 0;height:50px;}div:nth-of-type(5){border-radius:100px 0 0 0;height:100px;}img{border:2px red solid;width:100px;height:100px;border-radius:100px;}</style> <script type="text/javascript"> </script></head><body><div>圆</div><div>定义</div><div>橄榄圆</div><div>半圆</div><div>1/4圆</div><img src="" alt="图片"></body></html>

0 0