目录
suibi

html圆角属性代码讲解(html怎么设置圆角矩形教程)


在css3之前,并没有直接的设置元素圆角的属性,那如何实现设计图中的圆角设定呢?

如:表单demo中的文本框圆角。

一般通过在PS 软件中截取上左、上右、下左、下右四个边角的圆角图片,通过background-position背景图属性设定位置,从而实现圆角的设定。

或是将四个圆角图片当做四个img标签,通过position定位属性找寻设定的位置,如:

通过图片设定圆角

在IE6、7、8还比较盛行的时候,如果要兼容到IE浏览器,需要使用CSS hack兼容IE浏览器版本,高级浏览器可以直接使用border-radius属性设定圆角,对低版本浏览器使用图片定位的方式实现设计图呈现。但随着近几年浏览器版本的不断更新迭代,我们需要做的就是,如果需要兼容低版本浏览器,只需保证呈现正常即可,无需过分的追求展示效果与设计图的还原度。但实现的思想在web布局中是很重要的。

border-radius:

常见的圆角设定中一般取3px或5px;随着设定值得不断增加弧度会越来越大,但设定的值到达div高度的一半时,便不会再变化(此时的圆弧已经成为半圆形)。

圆角矩形

圆角矩形

当div为正方形时,设定圆角的数值为高度的一半或50%时,div呈现为圆形。

多角度圆角

多角度圆角

单方向圆角:

Border-radius提供了四个方向值(类似于margin和padding),但实际应用中还是直接设置单方向圆角更方便。

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

利用border-radius绘制原型 圆角矩形及单方向圆角在web呈现中使用率非常高。


写笔记

咨询

您的电子邮箱地址不会被公开。