Css(border 边框的那点事)(五)

边框的介绍

        边框的基本属性

            border：border-width border-style  border-color

                border-width

                border-color

                            border-top-colors

                            border-bottom-colors

                            border-left-colors

                            border-right-colors

                            注意：分开写时，colors多了一个s的，不然错误

                border-style

                            none    无定义

                            hidden 没有边框

                            dotted 点状线边框样式

                            dashed 虚线样式

                            solid 实线样式

                            double 双线样式

                            groove 定义3D凹槽边框

                            ridge 定义3D垄状边框

                            inset 定义inset边框

                            outset 定义outset边框

                            inherit 继承父级元素的样式

边框圆角属性

         取值方式

                    没有斜线

                                取一个值       四个角

                                取两个值       1左上右下，2左下右上

                                取三个值       1左上，2右上左下，3右下

                                取四个值       1左上，2右上，3右下，4左下

                    有斜线

                                反斜杠左边是水平半径，右边是垂直半径

                                取值格式

                                        border-radius:100px/200px;        取一个值，四个角

                                        border-radius:10px 200px 120px 40px / 100px 20px 40px 100px;   取四个值，四个角 角的顺序同上（斜杠左边的四个值分别是左上，右上，右下，左下的水平半径，斜杠右边是左上，右上，右下，左下的垂直半径）

                    单独设置某个角（单独某个角的设置，不需要返斜杠/ 直接设置两个值，即代表水平半径和垂直半径）

                                border-top-left-radius:10px 100px;        

                                border-top-right-radius:100px 10px;

                                border-bottom-left-radius:100px 10px;

                                border-bottom-right-radius:100px 10px;

                               注释：单独某个角的设置，不需要返斜杠/ 直接设置两个值，即代表水平半径和垂直半径

注意

        1.边的宽度大于设置的半径长度，则内角没有圆弧

        2.border-radius是css3属性，使用时最好添加前缀

        3.圆角在img和table的应用上差点（体现在浏览器兼容上  img在safari上没有效果  table上的应用在现代浏览器中已经能够兼容了）

        兼容性        ie 9+    火狐 3+    chrome 1.0+    欧朋 10.5+    Safari 3+

盒子阴影属性

        6个参数（按照顺序）

                1.横向阴影（外侧 可负数）

                2.纵向阴影（外侧 可负数）

                3.阴影模糊半径（0以上，不可负值）

                4.阴影扩展半径（可负数）

                5.阴影颜色

                6（inset）顺序可第一，或最后，控制内侧阴影

                注意：阴影扩展出来的位置，不算在盒子的宽高上，不影响盒子模型的长宽变化

                该属性只能对盒子有效，对img没有效果，使用时可以在外层嵌套一个div盒子

        多重阴影

                每设置一个阴影，用逗号隔开，继续写下一个阴影

                            box-shadow:1px 1px 1px 1px red,

                                        1px 1px 1px 1px orange，

                                        3px 3px 6px 3px yellow,

                                        4px 4px 8px 4px green,

                                        5px 5px 9px 5px skyblue,

                                        6px 6px 10px 6px blue,

                   多层阴影层级是第一个阴影为最上层，所以要注意多层时，上层阴影半径是否大于下层的半径

                    浏览器兼容性            IE9+    低版本IE可以用滤镜模拟，火狐3.5+ ，chrome2+ ， 欧朋10+，Safari4+