仓酷云

标题: 来一发CSS3属性border-radius绘制多种多样的图形 [打印本页]

作者: 简单生活 时间: 2015-1-15 22:49
标题: 来一发CSS3属性border-radius绘制多种多样的图形
对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
破洛洛文章简介：border-radius不单单是圆角。
border-radius，国际翻译成圆角，你大概觉得这个属性就是用来画圆角，没错，可是除此以外，它还能够做点其余事变。radius实在指的是边框地点圆的半径，这个CSS3属性不但可以创立圆角，还能够创立椭圆角（如图下图第7），把这些角依照分歧的按次和巨细来展示，可以绘制成多种多样的图形。以下图例就是经由过程界说border-radius失掉的效果。

把这些基础的图形举行组合，还能够刻画成分歧的图案，真的很棒。以下只是复杂的几个举例，更多的图形，本人下手画吧。仅border-radius就可以完成这么丰厚的图案，假如再加上边框巨细、突变色彩和暗影等，将会增加更多的质感。

语法息争释

border-radius能够经由过程值来界说款式不异的角，也对每一个角分离界说。上面的表格注释了各个写法所暗示的效果。
语法注释border-radius:10px将创立四个巨细一样的圆角，如和2。border-radius:10px15px10px5px;四个值分离暗示左上角、右上角、右下角、右下角。border-radius:10px15px;第一个值暗示左上角、右下角；第二个值暗示右上角、左下角。border-radius:10px15px5px;第一个值暗示左上角；第二个值暗示右上角、左下角；第三个值暗示右下角。border-bottom-left-radius:20px10px;创立不合错误称的角–椭圆角。border-radius:20px/10px;写椭圆角的时分，能够用短写法，创立四个一样的椭圆角。border-radius:10px20px30px40px四个值分离暗示四个角的半径（程度和垂直半径一样），如1。border-radius:10px20px30px40px/20px50px30px10px;斜杠后面的一组四个值分离暗示四个角的程度半径；斜杠前面的一组四个值分离暗示四个角的垂直半径。如。border-radius:10px20px40px/20px50px;斜杠后面和前面每组分离暗示的是四个角程度半径和四个角垂直半径。两个值、三个值的按次划定规矩你懂的哈。关于每一个角的两个值，分离代表的是该角的程度偏向和垂直偏向的半径。如有四个值，下面表格有注释。看上面这个图，也许会明晰些。

边框巨细和外半径、内半径的干系

实践的内半径相称于外半径减往响应的边框巨细。相减的值中假如最少一个为为负值或零，则内半径为直角。
不论如何，相邻的两个边城市构成流利的线条。

使用实例

border-radius能够用来制造很活泼的效果。能够点击上面的链接检察：
border-radius分离Gradients、BoxShadow写的OpraLogowithCSS
兼容Firefox老的版本

为了兼容Firefox3.6及以下版本，必要写上供给商前缀，为-moz-border-radius:5px，关于每一个角的语法，则为：-moz-border-radius-topleft:5px;要出格注重这与尺度写法分歧。
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。

作者: admin 时间: 2015-1-17 19:05
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 若天明 时间: 2015-2-1 16:14
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 灵魂腐蚀 时间: 2015-2-7 09:49
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 活着的死人 时间: 2015-2-21 20:25
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 冷月葬花魂 时间: 2015-3-13 23:07
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 变相怪杰 时间: 2015-3-20 22:37
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

欢迎光临仓酷云 (http://ckuyun.com/)