CSS3-设置基本边框和背景

最新推荐文章于 2023-11-13 17:08:55 发布

MelanceXin

最新推荐文章于 2023-11-13 17:08:55 发布

阅读量1k

点赞数

分类专栏： HTML+CSS+JS ASP.NET 文章标签： CSS3 Border BackGround 边框和背景

本文链接：https://blog.csdn.net/Q672405097/article/details/89532967

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

CSS3中设置基本边框属性

Border-width 设置边框的宽度
Border-style 设置边框的样式类型
Border-color 设置边框的颜色
Border 设置所有边框（实例：P{border:10px;solid black}）
Border-top 设置上边框
Border-button 下
Border-left 左
Border-right 右
Border-radius 设置圆角边框（实例：border-radius：20px/15px 分别对应圆心离边框左右边距为20px，距离上下边距为15px）

实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin BorderCSS_Test</title>
    <style type="text/css">
        .class1 {
            border-width: 5px 10px 5px 10px;
            /* 分别对应  上  右  下  左  边框的粗细 */
            border-color: #345cff;
            border-style: solid;
            /* solid 实线  dashed 虚线 dotted 点线  none 无边框  . */
            border-top-color: #fff314;
            /* 设置上边框的颜色 */
            border-bottom-style: dotted;
            /* 设置下边框的样式 */
        }

        .class2 {
            border: 5px solid red;
            /* 边框  粗细  样式   颜色 */
            border-top: 10px dashed yellow;
        }
    </style>
</head>

<body>
    <p class="class1" style="width:200px">MelanceXin </p>
    <br>
    <p class="class2"style="width:200px">MelanceXin </p>
</body>

</html>

实现效果：
在这里插入图片描述

CSS3中设置基本背景属性

Background-image 设置背景图片
Background-repeat 设置背景重复方式
Background-attachment 设置背景是否随滚轮移动（Fixed为不随滚轮移动而移动）
Background-color 设置背景颜色
Background-size 设置背景图像的大小

实例1：（图片随页面滚动）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin BackgroundCSS_Test</title>
    <style type="text/css">
        .class1 {
            border: 5px solid red;
            border-top: 10px dashed yellow;
            width: 100px;
            height: 100px;
        }

        .class2 {
            width: 100px;
            height: 100px;
            background-image: url(image.jpg);
            /* 图片的url */
            background-repeat: no-repeat;
            /* 图片是否重复 */
            background-size: cover;
            background-attachment: none
                /* 随页面滚动效果 */
        }

        body {
            background-image: url(image.jpg);
            /* 图片的url */
            background-repeat: no-repeat;
            /* 图片是否重复 */
            background-size: cover;
            /* 属性值cover   */
            background-attachment: fixed
                /* 随页面滚动效果 */
        }
    </style>
</head>

<body>
    <p class="class1">MelanceXin </p>
    <p class="class2">MelanceXin </p>
</body>

</html>

实例2：（边框圆角效果）

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin BackgroundAndBorderCSS_Test</title>
    <style type="text/css">
        .class1 {
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-image: url(image.jpg);
        }

        .class2 {
            width: 200px;
            height: 50px;
            border: 1px solid black;
            background-color: antiquewhite;
            border-radius: 10px/10px; 
            /* css3.0 的新设置	设置正方形的四角圆润    分别距离左边10px 上边10px */
        }
    </style>
</head>

<body class="class1">
    <p class="class2">MelanceXin </p>
</body>

</html>

MelanceXin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3-设置基本边框和背景

CSS3中设置基本边框属性Border-width 设置边框的宽度Border-style 设置边框的样式类型Border-color 设置边框的颜色Border 设置所有边框（实例：P{border:10px;solid black}）Border-top 设置上边框Border-button 下Border-left 左Border...
复制链接

扫一扫