一些最重要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>
测试结果
网友评论