CSS进阶边框组合使用

最新推荐文章于 2025-05-27 21:13:42 发布

磁悬浮电冰箱

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量35

点赞数

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131835956

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .a{
        float: left;
        margin-right: 30px;
        width: 400px;
        height: 400px;
        /* 边框组合使用 */
        /* border:10px solid #000; */
        /* 宽度
            固定值
            thick :更宽(5px)
            thin :更细(1px)

        */
        border-width:20px ;
        /* 样式
        solid:实线
        dotted:点状线
        dashed:虚线
        groove 槽线 */
        border-style:solid ;
        /* 颜色
        border-color
        *全部
        ** 上下  左右
        *** 上 左右 下
        **** 上 右 下 左 */
        border-color: pink red green blue;
        /* 单个方向设
        border-方向-属性 */
        /* 圆角 顺时针
        *四个角
        **左上右下 左下右上 
        ***左上 右上左下 右下
        **** 左上 右上 右下 左下
        */
        border-radius: 10px;

        border-image: url(./img/sc17.png) 30 30 round;
        
    }
    .b{
        float: left;
        width: 0;
        height: 0;
        border-width:400px ;
        border-style:solid ;
        border-color: transparent;
        border-bottom-color: pink;
        border-bottom-width:800px ;
    }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>