12.4css页面背景样式

Smiling Mr. Rui

已于 2024-01-21 22:27:51 修改

阅读量492

点赞数 2

分类专栏：网络安全文章标签： css css3 html

于 2021-12-09 13:58:29 首次发布

本文链接：https://blog.youkuaiyun.com/AXDRXS/article/details/121817864

版权

网络安全专栏收录该内容

31 篇文章

订阅专栏

一，背景图片与背景颜色的样式

对于背景图片的处理，我们有以下几种方式

1，no-repeat:不平铺

2，repeat-x:x轴方向

3,repeat-y:y轴方向平铺

4,repeat: x与y轴方向都平铺（默认方式）需要设置面的值，我们需要另外的属性background-repeat 需要移动背景图需要使用background-position,它是通过坐标轴设置

1，left top/bottom/center;左上、下角、中间

2，right top/bottom/center;右上、下角、中间以上属性可以使用background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片样式设置</title>
    <style>
        .box{
            width:1000px;
            height:1000px;
            border:1px dotted #000000;
            /*设置图片背景
            background-image: url("");
            background-repeat: ;
            background-position: ;*/
            background: #4a78c2 url("images/桌面.png") no-repeat  center;
        }
        </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色的样式</title>
    <style>
        .box {
            width:300px;
            height:300px;
            background-color: blue;
        }
        .box1{
            width:100px;
            height:100px;
            background-color: #ccccc;
            position: absolute;
            left:8px;
            top:8px;
        }
        .box2 {
            width: 100px;
            height: 100px;/*数值越小颜色越深*/
            background-color: rgb(255,0,0);
            position: absolute;
            left:8px;
            top:120px;
        }
        .box3{
            width: 100px;
            height: 100px;/*最后一个值表示透明度，范围在0-1之间，0表示完全透明，1表示完全不透明*/
            background-color: rgba(o,255,255);
            position: absolute;
            left:120px;
            top:20px;
        }
    </style>

background -color直接定义颜色，position进行定位

二、边框属性

指定边框可使用border-left/right/top/bottom-color来设置颜色，style指定样式 width指定宽度

在实际开发中，border属性统一制定即可 border:线的宽度样式颜色

缺点：开地图炮

1，外边距属性

容器与容器距离为外边距 margin属性指定，使用语法参考padding 设置四值，上左右下设置两个值，上下左右设置一个值，四个值都是一样的。

2，内边距属性

内容与边界的距离为内边距设定用padding属性设置，上下左右各不相同设置四值，上左右下设置两个值，上下左右设置一个值，四个值都是一样的。

三、圆角、阴影与浮动

1、圆角

圆心到圆角的距离，设为半径，浏览器设定不同的值，以px为单位，也可以使用百分比

四个角可以用不同的值，展示出不一样的图

2、阴影

定义阴影用box-shadow属性

h-shadow v-shadow blur spread color position

水平垂直模糊距离阴影尺寸颜色

默认都是内部阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: deeppink;
            box-shadow: 20px 5px 5px gray ;
        }
    </style>

3、浮动

默认情况下，li内容是竖着显示，若横，则需要浮动使用float属性定义：

它有两个值: left左浮动

right右浮动