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>

 

posted @ 2016-09-27 14:18  不正经的CodeMonkey  阅读(166)  评论(0)    收藏  举报