css3图片，变换相关属性

最新推荐文章于 2024-07-05 23:24:20 发布

vivi_and_qiao

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发

本文链接：https://blog.youkuaiyun.com/vivi_and_qiao/article/details/79888327

web前端开发专栏收录该内容

9 篇文章

订阅专栏

本文通过实例演示了如何使用CSS实现不同样式的布局效果，包括旋转背景图片、圆形边框及浮动元素等，深入探讨了CSS的灵活性与实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css高效开发实战
    </title>
</head>
<body>
    <div 
    style="width: 50%;height: 400px;background-image: url(背景.jpg);background-size: 500px,auto;transform: rotateZ(30deg);" 
    ></div>
    <div style="float:left;width:50%;height: 400px;background-image: url(背景.jpg);background-size: contain;background-origin:content-box;transform: rotate(30deg);"
    ></div>
    <div style="border-radius: 50px;width: 50px;height: 50px;background-color: blue;float: right;"></div>
</body>
</html>