爱问知识人网络 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常用属性集合！