CSS3 用户界面

玖商

于 2021-10-05 17:43:51 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/weixin_58139900/article/details/120608994

版权

HTML 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

css3

39 篇文章 0 订阅

订阅专栏

resize

作用：规定是否可由用户调整元素的尺寸。
取值
- none 用户无法调整元素的尺寸。
- both 用户可调整元素的高度和宽度。
- horizontal用户可调整元素的宽度。
- vertical 用户可调整元素的高度。
注意
- 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

box-sizing

作用：规定盒子组成模式
取值

content-box：定义宽高不包括宽度和高度 border-box：字义宽高包括宽度和高度

兼容性：

多列布局

CSS3 支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）

column-width属性

作用：规定栏目的宽度。
取值
- number 指定栏目宽度。
- auto 自动，由其他属性决定列数，如 "column-count"。

column-count属性

作用：规定元素应该被划分的列数
取值
- auto 由其他属性决定列数，比如 "column-width"。
- number 元素内容将被划分的最佳列数。

column-gap 属性

作用：规定列之间的间隔。
取值
- normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。
- length 把列间的间隔设置为指定的长度。

column-rule 属性

作用：设置列与列间的边框宽度、样式和颜色规则。
column-rule-width边框宽度
column-rule-style 边框样式
column-rule-color边框颜色
注：column-rule为column-rule-width ，column-rule-style ，column-rule-color;的简写属性

兼容

避免列内截断的属性 break-inside:aviod-column; 加在列的每一个小盒子身上！

渐变文本

 .box {
            width: 400px;
            height: 250px;
            border:1px solid #ccc;
            margin: 100px 0px 0px 100px;
            /* background-image: linear-gradient(135deg,pink,yellowgreen,blue); */
            background-image: url(./image/m6.webp);
            font-size: 100px;
            text-align: center;
            line-height: 250px;
            font-weight: 900;
            color: transparent;
            /* 溢出文本外的背景切掉！！！ 私有属性 没有被标准 -webkit-支持！！ */
            -webkit-background-clip:text ;
        }
    </style>
</head>
<body>
    <div class="box">HTFC</div>