初级前端的自我救赎【HTML+CSS篇】：12.css3新特性之边框圆角、阴影、形变

最新推荐文章于 2023-09-18 13:37:42 发布

努力更加努力

最新推荐文章于 2023-09-18 13:37:42 发布

阅读量107

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44088319/article/details/120520568

版权

这篇博客介绍了CSS3的一些关键特性，包括边框圆角、阴影和形变的使用。通过示例代码，展示了如何创建带有圆角、阴影效果的元素，并利用transform进行旋转、缩放和位移操作。同时，提供了一个小练习，要求实现一个居中显示的带阴影的蓝色正圆。

摘要由CSDN通过智能技术生成

css3新特性
一、边框圆角
二、阴影
三、形变：旋转、缩放、位移
四、过渡效果
五、动画效果
六、媒体查询
七、flex布局
八、grid布局

等等（选择器、字体）…… 

以下先记录边框圆角、阴影、以及形变


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            border: 1px solid red;
            /* 圆角 */
            border-radius: 20%;
            /* border-radius是圆角的半径 */
            /* 50%代表是边的50% 则50%就是正圆*/
  
            /* 阴影 */
            background: blue;
            box-shadow: 10px 20px 30px green;
            /* boxs-shadow x轴偏移量 y轴偏移量 模糊半径 颜色（默认不写为黑色） */
        
            /* 形变 */
            /* 旋转 deg单位代表角度 */
            transform: rotate(45deg);
            /* 缩放 */
            /* transform: scale(0.7); */
            /* 位移 */
            /* transform: translate(50px,100px); */
            /* 不能并排写 因为transform是同一个属性 会覆盖掉 */           
            /* 只能这样写 */
            /* transform: translate(50px,100px) rotate(45deg) scale(0.7); */
        }

        /* .box:hover{
            transform: rotate(45deg);
        } */

        /* 让一个元素在网页中水平垂直居中 */
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            /* 由于锚点在左上角 所以需要位移-50%,-50% */
            /* 这个50%是自身的宽高比50%，所以等于移动了一个半径的距离 */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">hello</div>
</body>
</html>

transform不能分开写，因为是同一属性，分开写则会覆盖掉

以下是小练习
按要求完成案例，要求如下：
1.让一个蓝色的正圆垂直水平居中显示。
2.正圆的直径为100px。
3.阴影距离距离正圆偏离10px，阴影颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: blue;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left:50%;
            box-shadow: 10px 10px 10px red;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

努力更加努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初级前端的自我救赎【HTML+CSS篇】：12.css3新特性之边框圆角、阴影、形变

css3新特性一、边框圆角二、阴影三、形变：旋转、缩放、位移四、过渡效果五、动画效果六、媒体查询七、flex布局八、grid布局等等（选择器、字体）…… 以下先记录边框圆角、阴影、以及形变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
复制链接

扫一扫