css-day05

最新推荐文章于 2024-10-09 20:10:15 发布

xiaoruia

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量160

点赞数

分类专栏：我的前端学习记录文章标签： css css3 html

本文链接：https://blog.csdn.net/xiaoruia/article/details/125453334

版权

这篇博客详细介绍了CSS中的边框属性，包括border、border-radius及其复合属性的使用，强调了solid作为必要属性的重要性，并展示了如何用边框创建三角形。接着，博主讲解了背景图片的设置，如background-image、background-repeat、background-position和复合属性background的用法。最后，文章探讨了浮动元素的效果，以及如何清除浮动影响。

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

day05

边框

border：边框
- border-weight：设置边框的宽度
- border-style：设置边框的样式
  - solid：实线
  - double：双实线
  - dashed：虚线
  - dotted：点划线
- border-color：设置边框的颜色
  - transparent：透明色
- 复合属性 border：weight style color
- 可以同时或者分别设置四个边的宽度，样式，颜色
  - 同时设置四个的时候，顺序为上->右->下->左
  - 设置三个的时候，顺序为上->左右->下
  - 设置两个的时候，顺序为上下->左右
- border-radius：将边框变圆
  - 当盒子为宽高一样时，border-radius=50%时变成一个圆形
  - 宽高不一样则变成椭圆
重点：
- 一般使用边框只是单个边框的使用，left/right/top/buttom
- solid是必要属性，当不设置另外两个属性时，默认为黑色，3px
- 可以用边框的颜色实现三角形，当盒子宽高为0时，盒子就可以由边框撑起来，平均分为四等块，将其他四个块设置为透明色，则实现三角形
- 复合属性遵循上->右->下->左的顺序

实例：

<!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: 0px;
            height: 0px;
            border-width: 50px 100px;
            border-style: solid;
            /* transparent 透明色 */
            border-color: transparent transparent transparent red;
        }
        .box-one {
         
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            /* 变成圆形 */
            border-radius: 50%;
        }
        .underline {
         
            margin-top: 100px;
            width: 300px;
            height: 50px;
            border-top: 2px dashed blue;
        }
        .box-two {
         
            width: 300px;
            height: 30px;
            margin-top: 100px;
            text-indent: 32px;
            line-height: 30px;
            font-weight: 700;
            border-left: 10px solid skyblue;
        }
    </style>
</head>
<body>