背景属性

最新推荐文章于 2023-07-27 17:18:29 发布

m0_72630538

最新推荐文章于 2023-07-27 17:18:29 发布

阅读量239

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_72630538/article/details/126200836

版权

本文深入探讨了CSS3的背景属性，包括background-clip属性，用于控制背景颜色的绘制区域；介绍了线性渐变（linear-gradient）和径向渐变（radial-gradient）的使用方法；还详细讲解了多列布局的相关属性，如column-count、column-width、column-gap和column-rule，帮助开发者实现更灵活的网页设计。

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

1、背景属性

背景颜色绘制区域——background-clip属性

background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值
background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示
background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示

     .wrap div {
            width: 200px;
            height: 200px;
            background: plum;
            padding: 30px;
            margin: 30px;
            border: 20px dotted black;
        }

        /* 背景被裁剪到内容区域，仅在内容区域显示 */
        .wrap div:nth-child(1) {
            /* content-box */
            background-clip: content-box;
        }

        /* 背景被裁剪到内填充区域，在内容区、内填充区显示 */
        .wrap div:nth-child(2) {
            /* padding-box */
            background-clip: padding-box;
        }

        /* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 */
        .wrap div:nth-child(3) {
            /* border-box */
            background-clip: border-box;
        }

2、渐变

从一种颜色到其他颜色的过渡（两种及两种以上颜色）

1）线性渐变 linear-gradient

线型渐变：从一个方向到另一个方向的渐变

语法

background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
    方向：数值（单位deg)、关键词（left|right   top|bottom)
    颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)
    范围：每个颜色结点的显示范围
    取值：
         1.px
         2.百分比
    注意：
    方向：加前缀需要把to去掉，方向是相反的
    默认方向：从上到下


取值：

1、使用起始位置关键字 

- to right  方向自左向右

- to top  方向自下而上

- to bottom 方向自上而下

- to left  方向自右而左

- to right top  方向朝向右上角
- to right bottom  方向朝向右下角
- to top left 方向朝向左上角
- to left bottom方向朝向左下角


 2、使用角度
- 0deg 相当于  to top
- 90deg 相当于 to right

重复线性渐变

background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
background: repeating-linear-gradient(180deg, red 0%, red 10%, yellow 10%,yellow 20%);
<!DOCTYPE html>
<html lang="en">

最低0.47元/天解锁文章

m0_72630538

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
背景属性

background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示2、渐变从一种颜色到其他颜色的过渡（两种及两种以上颜色）线型渐变：从一个方向到另一个方向的渐变重复线性渐变2）径向渐变 radial-gradient径向渐变：一个
复制链接

扫一扫