CSS圆角矩形设置

html-css011

CSS圆角矩形设置,第1张

CSS圆角矩形可以使用 Border-radius 属性即可实现。

Border-radius 属性相关定义功能及其案例:

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

定义和用法:border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。该属性允许您为元素添加圆角边框!

默认值:0;

继承性:no;

版本:CSS3;

JavaScript 语法:object.style.borderRadius="5px"。

语法:border-radius: 1-4 length|% / 1-4 length|%。

length:定义圆角的形状。

%:以百分比定义圆角的形状。

案例:

案例1:border-radius:2em

等同于:

border-top-left-radius:2em

border-top-right-radius:2em

border-bottom-right-radius:2em

border-bottom-left-radius:2em 案例2:border-radius: 2em 1em 4em / 0.5em 3em 等同于:

border-top-left-radius: 2em 0.5em

border-top-right-radius: 1em 3em

border-bottom-right-radius: 4em 0.5em

border-bottom-left-radius: 1em 3em

注意事项:

按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

方法一:border

我们知道利用border+宽高:0 可以实现如下效果 (假设圆的半径是100px)

如果要实现扇形在此基础上圆角一下即可,同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果

方法二:矩形+半圆相切

基本思路是:左边的半圆旋转与右边的矩形相切。

至于细节: 

1.半圆的由来:可以rect裁剪只显示圆的左边部分 

2.同理,矩形也通过rect裁剪只显示右边部分,同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

然后剩下的完善同样三个标签旋转一定角度。

不知道LZ说的是哪一种折角矩形哦,最好贴个图上来看看,

不过一般就内容变化的矩形都是用CSS写出来的,现在CSS3已经有属性支持了,LZ可以学习下,要是用CSS2.0也是可以做到的,不过麻烦点~要用PS做四个圆角图片再加上CSS样式就可以做出随内容而变的圆角矩形了~(只能是单色的哦)