CSS3圆角
2018-12-28 08:03:47来源:博客园 阅读 ()
圆角border-radius,其css如下
IE9+支持(就是ie6,ie7,ie8都不支持),默认值是0,不继承,可以像下面那样设置4个角的值,也可以单独设置,如 border-top-left-radius:2em;
1 /*border-radius:后面跟1个值、2个值、3个值、4个值时的情况*/ 2 /*1个值:四个角一样圆*/ 3 border-radius:四个圆角一样的值; 4 5 /*2个值,前:左上右下,后:右上左下*/ 6 border-radius:左上角和右下角值 右上角和左下角值; 7 8 /*3个数值*/ 9 border-radius:左上角值 右上角和左下角值 右下角值; 10 11 /*4个数值*/ 12 border-radius:左上角值 右上角 右下角值 左下角值;
上面每个圆角都是标准的圆形来过渡的角,也可以用椭圆,x轴和y轴的值不相等,前面x,后面y,如下,/ 前面都是各个角的水平方向值,/ 后面是各个角的垂直方向的值
-------------
这没什么难的,记忆一下即可。但是深入一下,还是很有讲究的。
问题1,div宽高皆为100px,border-radius:30px,这个30px是怎么工作的?换成50px,70px,甚至200px会有什么反应?
答:等于一个100px的正方形,然后用半径为30px的圆来过渡边角,如果要在大脑中有动态的效果的话,不妨如下图来理解,更加方便。
当圆角是30px的时候,效果如上,如果圆角为50px呢?各占用50px,则达到中间点了,变成一个圆了!如果div有边框10px呢,这border-radius为60px才是圆,如下图
如果border-radius为70px呢?明显,2个70是大于100的,这个角按70来画,另外一个角就不够用了
问题2,既然边框变圆了,形状改变了,面积改变了,那么对div里面的内容有什么影响呢?
答曰:视同不变!如下图
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:网页关闭
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash