css样式学习样例之边框

news2024/11/27 0:22:40

成品效果

在这里插入图片描述

边框固定

.login_box{
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

这段CSS代码定义了一个名为.login_box的类的样式，它主要用于创建一个登录框的视觉效果。下面是对这段CSS代码每个属性的详细解释：

width: 450px;
- 这个属性设置了.login_box的宽度为450像素。这意味着登录框在水平方向上会占据450像素的空间。
height: 300px;
- 这个属性设置了.login_box的高度为300像素。这决定了登录框在垂直方向上的大小。
background-color: aliceblue;
- 这个属性设置了.login_box的背景颜色为aliceblue。Aliceblue是一种淡蓝色调，常用于用户界面设计中，因为它看起来清爽且不过于刺眼。
border-radius: 3px;
- 通过这个属性，.login_box的边角会被设置为圆角，圆角的半径为3像素。这有助于创建更加柔和、友好的视觉效果，而不是尖锐的直角。
position: absolute;
- 这个属性将.login_box的定位方式设置为绝对定位。绝对定位的元素会脱离其正常文档流，并根据其最近的已定位（即非static定位）祖先元素进行定位。如果没有这样的祖先元素，它将相对于文档的初始包含块（通常是视口）进行定位。
left: 50%;
- 这个属性将.login_box的左边距设置为其父元素宽度的50%。由于使用了绝对定位，这会将登录框的左边缘置于其父元素（或视口）的中心点左侧的位置。
top: 50%;
- 类似地，这个属性将.login_box的上边距设置为其父元素高度的50%。这会将登录框的上边缘置于其父元素（或视口）的中心点上方的位置。
transform: translate(-50%,-50%);
- 最后，这个属性通过应用一个转换来微调.login_box的位置。translate(-50%,-50%)将元素向左和向上移动其自身宽度和高度的50%。结合前面的left: 50%;和top: 50%;，这实际上将登录框的中心点对齐到其父元素（或视口）的中心点，从而实现了完美的居中效果。

总的来说，这段CSS代码创建了一个宽450像素、高300像素、背景色为aliceblue、具有3像素圆角的登录框，并通过绝对定位和转换实现了在视口中的水平和垂直居中。

边框嵌套图片

.avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10%;
        box-shadow: 0 0 10px #dddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

这段代码定义一个名为.avatar_box的类的样式，该样式通常用于创建一个圆形头像容器。下面是对这段代码中各个属性的详细解释：

height: 130px; 和 width: 130px;: 这两个属性设置了.avatar_box的高度和宽度都为130像素，确保容器是一个正方形。
border: 1px solid #eee;: 为容器设置了一个1像素宽、实线、颜色为#eee（浅灰色）的边框。
border-radius: 50%;: 将容器的边框圆角半径设置为50%，这意味着边框的每一个角都会被完全圆化，从而创建一个圆形容器。
padding: 10%;: 尝试为容器设置内边距为容器宽度的10%。
box-shadow: 0 0 10px #dddd;: 为容器添加了一个阴影效果，阴影在水平和垂直方向上都偏移0像素，模糊半径为10像素，颜色为#dddd（浅灰色）。
position: absolute;: 将容器的定位方式设置为绝对定位。这意呀着.avatar_box将脱离文档流，并根据其最近的已定位（即，position属性不是static）祖先元素进行定位。
left: 50%; 和 transform: translate(-50%,-50%);: 这两个属性一起工作，以确保.avatar_box在其最近的已定位祖先元素的中心位置。left: 50%将容器的左边缘置于其包含块的中心（但由于容器的宽度，它实际上会向右偏移其宽度的一半），而transform: translate(-50%,-50%);则将容器向上和向左移动其自身宽度和高度的50%，从而将其中心与包含块的中心对齐。
background-color: #fff;: 设置容器的背景颜色为白色（#fff）。

总结


<div class="login_container">
        <div class="login_box">
            <div class = 'avatar_box'>
                <img src="../assets/img/favicon.ico" alt="">
            </div>
        </div>
    </div>

<style lang="less" scoped>
.login_container{
    background-color: #2b6b4b;
    height: 100%;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10%;
        box-shadow: 0 0 10px #dddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}
</style>

这段代码主要使用了CSS（特别是LESS语言）和HTML元素来构建一个具有特定样式的登录界面。下面是对这段代码中涉及的主要技术点的总结：

LESS（动态样式语言）：
- LESS是一种CSS预处理语言，它扩展了CSS的功能，增加了变量、嵌套规则、混合（mixins）、函数等特性。这使得CSS代码更加模块化、可维护，并允许使用类似于编程语言的特性来编写样式。
- 在这段代码中，LESS的嵌套规则被用来定义.login_box内部.avatar_box的样式，这简化了CSS的编写，避免了重复的选择器。
CSS样式：
- 背景颜色：使用background-color属性设置元素的背景颜色。
- 尺寸：通过width和height属性设置元素的宽度和高度。
- 边框：border属性用于设置元素的边框样式，包括宽度、样式和颜色。
- 边框圆角：border-radius属性用于给元素的边框添加圆角效果。
- 定位：
  - position: absolute;：将元素设置为绝对定位，使其相对于其最近的已定位（非static）祖先元素进行定位。
  - left、top、transform（包括translate）：用于精确地控制绝对定位元素的位置。transform: translate(-50%, -50%);常用于将元素居中于其父元素的中心。
- 阴影：box-shadow属性用于在元素周围添加阴影效果，增强视觉层次感。
CSS作用域：
- scoped属性（尽管它是Vue单文件组件中的一个概念，但在这里提及以强调样式的作用域）：在Vue单文件组件中，<style scoped>表示样式只应用于当前组件的根元素及其子元素，防止样式冲突。然而，在纯LESS或CSS文件中，作用域需要通过其他方式实现（如BEM命名法、CSS模块等）。
图片样式：
- 在.avatar_box内部，img元素的样式被设置为与.avatar_box相同的宽度和高度，并应用了圆角边框，以确保图片也是圆形的。尽管设置了background-color，但这通常不会对<img>元素生效，因为它会被图片内容覆盖。