css2.0圆角,CSS圆角效果-CSS3常用属性集合

CSS3使用注意项：早期的firefox chrome 等某些游览器中也实现了部分CSS3，所以为了兼容部分，在CSS3中的编写，需要如此：

{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}

{moz内核游览器，webkit内核游览器，IE9}

Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下

Html代码：

Untitled Document

body{

padding: 20px;

background-color: #FFCC66;

font: 100.01% "Trebuchet MS", "Verdana", "Arial", "sans-serif";

color: #000000;

}

h1,h2,p{margin: 0 10px}

h1{font-size: 250%;color: #FFF}

h2{font-size: 200%;color: #f0f0f0}

p{padding-bottom:1em}

h2{padding-top: 0.3em}

div#roundconner{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFCC66}

b.rtop b, b.rbottom b{display:block;height: 1px;

overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

爱问知识人网络 http://www.awzsr.com

爱问知识人网络 http://www.awzsr.com

爱问知识人网络 http://www.awzsr.com

爱问知识人网络 http://www.awzsr.com

只要新建一个html文件，把里面都内容全部替换成上面的代码就可以看到效果了

border-radius:(圆角)

border-radius语法为：border-radius ： none | {1,4} [/ {1,4} ]? “/”前是指圆角的水平半径，而“/”后是指圆角的垂直半。

1.border-radius:10px; 当它只有一个值的时候，代表了四个角，如图：

2.border-radius:20px 5px 20px 5px;当它取四个值的时候，也许我们能换成如下更直观的CSS代码：

border-top-left-radius: 20px;

border-top-right-radius: 5px;

border-bottom-right-radius: 20px;

border-bottom-left-radius: 5px;

它的顺序位置分别是左上角->右上角->右下角->左下角，效果图如下：

3.border-radius:20px 5px; border-radius:20px 5px 40px;

[第一项的意思是与例子2相同，取两值，意思是左上角与右下角为20px，右上角与左下角为5px。]

[第二项的意思，当取三值的时候，左上角为20px，右上角为5px，右下角为40px，左下角为5px。] 效果图如下：

4.border-radius:20px 5px / 30px 30px;

前两项取值，是水平位置，后两项取值是垂直位置，它们与上述位置对应，左右右左。如图：

rgba:(R+G+B+Alpha)

语法格式：rgba(255,0,0,1);

它们分别对应颜色，饱和度，亮度，透明度。

应用：字体阴影等。

text-shadow:(文字阴影)

语法格式：[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]。#p#分页标题#e#

一个无text-shaodw效果的字体图片，如下：

从语法格式上，我们能看到，先取颜色，然后X轴，Y轴，模糊的半径。X轴：是阴影水平偏移的距离，正向右负向左。Y轴：是阴影垂直偏移的距离，正向下负向上。模糊半径的意思是：其模糊的程度，不能有负数值，值越大阴影越模糊，反之阴影则越清晰。

1.text-shadow:#333 0 3px 2px; 如图：

2.text-shadow:还能在一组字体上运用多个阴影，用','相隔开即可。

box-shaodw(图层阴影)

语法格式：box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [最多六个值可取]

说明：

投影方式：这里可选外，还是内。inset[内]，不选[内]

X轴：水平偏移的方向，正向右负向左。

Y轴：垂直偏移的方向，正向下负向上。

阴影模糊半径：只能为正数值，越大越模糊。

阴影扩展半径：正扩大负缩小。

阴影颜色：就是颜色了。

1.box-shadow:inset 0px 0px 10px 10px #936;

2.box-shadow: 0px 0px 10px 10px #936;

3.box-shadow: inset 10px 10px 10px -10px #936;

业精于勤，荒于嬉。行成于思，毁于随。

开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明CSS圆角效果-CSS3常用属性集合！