首页 > 代码库 > css3

css3

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .test{            width: 100px;            height: 100px;            background: #000;            border-radius: 20px;            /*圆角*/            /*box-shadow: x y z t c;*/        /*(x为阴影水平便宜量,y为垂直偏移量, z为阴影模糊程度,越大边缘越模糊, t为阴影的半径大小。 c为阴影的颜色)*/        }        .text{            text-shadow:1px 1px 5px #666;            /*text-shadow: X-Offset Y-Offset Blur Color*/            /*x为水平偏移量,y为垂直偏移量,B为阴影模糊程度,值越大越模糊。 C为阴影模糊颜色*/        }        .Gradients{            width: 200px;            height: 200px;            /*background: linear-gradient(direction, color-stop1, color-stop2, ...);*/            /*线性渐变,第一个参数为方向,第二的参数和第三个参数为起始和结束的颜色*/            background: -webkit-linear-gradient(left,red, blue); /* Safari 5.1 - 6.0 */            background: -o-linear-gradient(left,red, blue); /* Opera 11.1 - 12.0 */            background: -moz-linear-gradient(left,red, blue); /* Firefox 3.6 - 15 */            background: linear-gradient(left,red, blue); /* 标准的语法 */            /*transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-40deg,0deg);// 旋转,缩放,定位,倾斜*/            /*scale(x,y) 缩放,x为x轴缩放,y为y轴缩放, 只指定一个为等比例缩放*/            /*translate(x ,y)*/            /*translate(x,y) 缩放,x为x轴变动,y为y轴变动, */            /*skew(x,y)*/            /*倾斜变幻。*/        }        .Gradients:hover{            transform: rotate(40deg);            transform-origin:left top;//改变基点位置,默认是center,center        }    </style></head><body>    <div class="test"></div>    <p class="text">啥地方接口的酸辣粉</p>    <div class="Gradients"></div></body></html>

 

css3