CSS样式

时间：2016-01-30 09:39:59 阅读：222 评论：0 收藏：0 [点我收藏+]

标签：

CSS3 边框

边框属性

        border-radius
        box-shadow
        border-image

圆角边框
        eg:
        border-radius 属性用于创建圆角：
        向 div 元素添加圆角：
        div
        {
        border:2px solid;
        border-radius:25px;
        -moz-border-radius:25px;
        }
        border-image 属性允许您规定用于边框的图片！
        div
        {
        border-image:url(border.png) 30 30 round;
        -moz-border-image:url(border.png) 30 30 round;
        -webkit-border-image:url(border.png) 30 30 round;
        -o-border-image:url(border.png) 30 30 round;
        }

        background-size 属性规定背景图片的尺寸
        div
        {
        background:url(bg_flower.gif);
        -moz-background-size:63px 100px;
        background-size:63px 100px;
        background-repeat:no-repeat;
        }

        background-origin 属性规定背景图片的定位区域。

        背景图片可以放置于 content-box、padding-box 或 border-box 区域。
        background-origin:content-box;

        在 CSS3 中，text-shadow 可向文本应用阴影。
        能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
        h1
        {
        text-shadow: 5px 5px 5px #FF0000;
        }
        eg:
        p {word-wrap:break-word;}

2D 转换

        通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）
         和 top（y 坐标）位置参数
        eg:
        transform: translate(50px,100px);

        通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，
        元素将逆时针旋转
        transform: rotate(30deg);
        值 rotate(30deg) 把元素顺时针旋转 30 度。

        通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）
        和高度（Y 轴）参数：
        transform: scale(2,4);
        值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

CSS3 过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片过渡效果示例</title>
    <style>
    div{
        width: 1024px;
        height: 1024px;
        background: url("42-29407750.jpg");
        transition: width 5s, height 5s;
        background-size: cover;

    }
        div:hover{
            width: 2048px;
            height: 2048px;
        }

    </style>
</head>
<body>
<div> </div>

</body>
</html>

        通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，
        当元素从一种样式变换为另一种样式时为元素添加效果。
        CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
        规定您希望把效果添加到哪个 CSS 属性上
        规定效果的时长
        div
        {
        transition: width 2s;
        -moz-transition: width 2s;
        -webkit-transition: width 2s;
        -o-transition: width 2s;
        }
    注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

    <style type="text/css">
        .dong{
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            margin: 0 auto;
            animation: dong 5s;
            border-bottom: 2px solid salmon;
        }
        @keyframes dong
        {
            0%{
                background: red;
            }
            25%{
                background: yellow;
            }
            50%{
                background: blue;
            }
            100%{
                background: green;
            }}

        .donghua2{
            width: 400px;
            height: 400px;
            border: 2px solid gray;
            animation: donghua2 5s;
            font-size: 50px; color: aqua;
            text-align: center;
            /*text-decoration: underline;*/
            line-height: 7em;

        }
        @keyframes donghua2 {
            0%{
                background: greenyellow;
            }
            20%{
                background: wheat;
            }
            30%{
                background: salmon;
            }
            50%{
                background: aqua;
            }
            70%{
                background: midnightblue;
            }
            100%{
                background: lightslategrey;
            }
        }



    </style>


</head>
<body>
    <div class="dong"></div>

    <div class="donghua2">这是一个动画</div>

</body>
</html>

CSS样式

标签：

原文地址：http://www.cnblogs.com/Lixuemei/p/5170486.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行