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>
测试结果
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影
