css transform_rotate_box-shadow.html

最新推荐文章于 2023-02-20 10:39:24 发布

学无止境慢慢来

最新推荐文章于 2023-02-20 10:39:24 发布

阅读量99

点赞数

分类专栏： CSS

原文链接：https://www.runoob.com/cssref/css3-pr-transform.html

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css transform_rotate_box-shadow</title>
    <style>
        /*参考：https://www.runoob.com/cssref/css3-pr-transform.html*/
        body {
            margin: 30px;
            background-color: #E9E9E9;
        }

        div.polaroid {
            width: 304px;
            padding: 10px 10px 20px 10px;
            border: 1px solid #BFBFBF;
            background-color: white;
            /* 添加框影，原点可看作在画布的左上角。x正方向向右，y正方向向下。
             此处阴影是在该框的右侧和下边，阴影宽3px，颜色#aaaaaa。*/
            /*box-shadow: horizontal-shadow vertical-shadow blur color;*/
            box-shadow: 2px 2px 3px #aaaaaa;
        }

        div.rotate_left {
            float: left;
            /*-ms-transform:rotate(7deg); !* IE 9 *!*/
            /*-webkit-transform:rotate(7deg); !* Safari and Chrome *!*/
            transform: rotate(7deg);
        }

        div.rotate_right {
            float: left;
            /*-ms-transform:rotate(-8deg); !* IE 9 *!*/
            /*-webkit-transform:rotate(-8deg); !* Safari and Chrome *!*/
            transform: rotate(-8deg);
        }
    </style>
</head>
<body>
<div class="polaroid rotate_left">
    <img src="img/讲坛岩石.jpg" alt="" width="284" height="213">
    <p>挪威的讲坛岩石。</p>
</div>
<div class="polaroid rotate_right">
    <img src="img/蒙特罗索母马.jpg" alt="" width="304" height="236">
    <p>蒙特罗索母马。五彩地的五个村庄之一。</p>
</div>
<div style="clear: both;"></div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css transform_rotate_box-shadow.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>transform_box-shadow</title> <style> body { margin:30px; ...
复制链接

扫一扫

专栏目录