css3学习05——边框、背景、渐变颜色、文本效果、2D转换、3D转换
1、边框
border-radius:30px;/*圆角半径*/
box-shadow: 50px 50px 10px #888888;/*边框阴影*/
/*css样式*/
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
/*body内容*/
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
运行截图：
2、背景
/*css样式*/
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
/*body内容*/
<div id="example1">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
运行截图：
/*css样式*/
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
}
/*body内容*/
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
</div>
运行截图：
3、渐变颜色
/*css样式*/
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
/*body内容*/
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
运行截图：
/*css样式*/
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
/*body内容*/
<h3>7 个颜色结点（均匀分布）</h3>
<div id="grad2"></div>
运行截图：
/*css样式*/
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
/*body内容*/
<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>
运行截图：
/*css样式*/
#grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
/*body内容*/
<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>
运行截图；
4、文本效果
text-shadow: 5px 5px 5px #FF0000;/*文本背景及文字阴影*/
word-wrap:break-word;/*文本遇到边框自动换行*/
5、2D转换
/*css样式*/
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
/*body内容*/
运行截图：
6、3D转换
/*css样式*/
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
/*body内容*/
<div id="div1">
<div id="div2">HELLO</div>
</div>
运行截图：
