盒子大小，轮廓和圆角 , transform-origin属性

m0_74846139

于 2024-07-25 21:36:21 发布

阅读量207

点赞数 5

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_74846139/article/details/140504286

版权

1.盒子尺寸

box-sizing: 决定了盒子尺寸的计算方式，也就是整个盒子可见框的大小。其有两个可选值：

content-box ：默认值，属性width和height 用来规定内容区的大小。

因此盒子可见框大小与默认情况下的一样，都由内容区、内边距和边框共同决定。
border-box : 属性width和height被用来规定整个可见框的大小，就不再是内容区了。因此内容区的大小则是自适应了。

2.轮廓和圆角

outline 用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

div {
            /* 用来设置元素的轮廓线，用法和border一模一样
                轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 */
            outline: 100px solid red;
            /* border: 10px solid gold; */
            width: 200px;
            height: 200px;

        }

结果：

用border设置:

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动
第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上移动
第三个值阴影的模糊半径
第四个值阴影的颜色
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

box-shadow: 50px  50px 100px red;

效果：

border-radius: 用来设置圆角圆角设置的圆的半径大小

   - border-top-left-radius
   - border-top-right-radius
   - border-bottom-left-radius
   - border-bottom-right-radius

当然border-radius 可以分别指定四个角的圆角
四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下

 border-radius:50px 30px 50px 20px;

效果：

将元素设置为一个圆形
border-radius: 50%;

效果：

3.transform-origin属性

以模拟小行星运动轨迹来看：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟行星在轨道上的运动</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 1px dashed silver;
            margin: 0 auto;
            position: relative;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: -50px;
            top: 150px;
            /* transform: rotate(360deg); */
            animation: run 5s infinite linear;
            /* 两个值的取值：第一个为水平距离：是需要旋转的元素（即像小行星）
            的左上角的顶点到想要旋转的中心点（即轨道的圆心）的位置的水平距离
                            第二个为垂直距离，即需要旋转的元素（即像小行星）
            的左上角的顶点到想要旋转的中心点（即轨道的圆心）的位置的垂直距离 */
            transform-origin: 250px 50px;

        }

        @keyframes run {
            100% {
                transform: rotate(360deg);
            }

        }
    </style>
</head>

<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>

</html>

m0_74846139

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
盒子大小，轮廓和圆角 , transform-origin属性

box-sizing: 决定了盒子尺寸的计算方式，也就是整个盒子可见框的大小。其有两个可选值：content-box ：默认值，属性width和height 用来规定内容区的大小。因此盒子可见框大小与默认情况下的一样，都由内容区、内边距和边框共同决定。border-box : 属性width和height被用来规定整个可见框的大小，就不再是内容区了。因此内容区的大小则是自适应了。
复制链接

扫一扫