css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影

一些最重要CSS3模块如下

选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

## CSS3 边框

用 CSS3 你可以创建圆角边框 添加阴影框 并作为边界的形象而不使用设计程序 常用属性  

#### border-radius 圆角

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

注意: 每个半径的四个值的顺序是 左上角 右上角 右下角 左下角。如果省略左下角 右上角是相同的。如果省略右下角 左上角是相同的。如果省略右上角 左上角是相同的。

代码示例

body

    div style display: flex; width: 80%; margin: 0px auto;

        div style width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

       border: 1px solid black;

       border-radius: 50%;

           Test border-redius /div

        div style width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           border-radius: 20px 5px 5px 20px

           Test border-redius /div

        div style width: 100px; height: 100px; line-height: 100px; vertical-align: middle;

        text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           border-top-left-radius: 20px;

           border-top-right-radius: 20px;

           border-bottom-left-radius: 10px;

           border-bottom-right-radius: 10px;

           Test border-redius /div

    /div

/body

#### box-shadow 阴影

语法 box-shadow: h-shadow v-shadow blur spread color inset;

注意 boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表 每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

代码示例

body

    div style display: flex; width: 80%; margin: 0px auto;

        div style width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

       border: 1px solid black;

       box-shadow: 2px 3px 1px #909090 inset;

           Test box-shadow /div

        div style width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           box-shadow: 2px 3px 1px #909090

           Test box-shadow /div

        div style width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 1px solid black;

               box-shadow: -2px -3px 1px #909090

           Test box-shadow /div

        div style width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 1px solid black;

               border-radius: 50%;

               box-shadow: 2px 3px 1px #909090

           Test box-shadow /div

    /div

/body

#### border-image 使用图片作为边框

语法 border-image: source slice width outset repeat|initial|inherit;

代码示例

    div style display: flex; width: 80%; margin: 0px auto;

        div style width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

           border: 20px solid black;

           border-image: url(border.png) 30 30 round;

           Test border-image /div

        div style width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 20px solid black;

               border-image: url(border.png) 30 30 repeat;

           Test border-image /div

        div style width: 100px; height: 100px; line-height: 100px;  

               vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 20px solid black;

               border-image: url(border.png) 30 30 stretch;

           Test border-image /div

        div style width: 100px; height: 100px; line-height: 100px;  

               vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

                   border: 20px solid black;

                   border-radius: 50%;

                   box-shadow: 2px 3px 1px #909090;

                   border-image: url(border.png) 30 30 stretch;

           Test border-image /div

    /div