第二十六章CSS3续~

3.CSS3渐变属性

CSS3渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。

以前,我们必须使用图像来实现这些效果。但是,通过使用CSS3渐变(gradients),可以减少下载的事件和宽带的使用。由于渐变(gradient)是由浏览器生成的,因此添加了渐变效果的元素在放大时看起来效果更好。

CSS3定义了两种类型的渐变(gradients):

线性渐变(LinearGradients)-向下/向上/向左/向右/对角方向。

径向渐变(Radial Gradients)-由它们的中心定义。

浏览器支持:

表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟-webkit-、-moz-或-o-的数字指定了需加上前缀才能支持属性的第一个版本。

1.线性渐变

为了创建一个线性渐变,必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,也可以设置一个起点和一个方向(或一个角度)。

语法:

background:linear-gradient(direction,color-stopl,color-stop2.....);

示例:定义颜色节点的渐变

repeating-linear-gradient()重复性渐变:

2.径向渐变

径向渐变由它的中心定义,为了创建一个径向渐变,我们至少要定义两种颜色的结点。颜色结点即你想要的呈现平稳过渡的颜色。

语法:

background:radial-gradient(center,shape size,start-color,.....last-color)

示例:

repeating-radial-gradient()重复径向渐变

4 . 用户界面

在CSS3中增加了一些新的用户界面特性来调整元素尺寸和框尺寸。

1.resize属性

resize属性规定是否可由用户调整元素尺寸。

注释:如果希望此属性生效,需要设置元素的overflow属性,值可以是auto,hidden或者scroll。

语法:

resize:none| both| horizontal| vertical

可能的值:

|------------|---------------|
| none | 用户无法调整元素的尺寸 |
| both | 用户可调整元素的高度和宽度 |
| horizontal | 用户调整元素的宽度 |
| vertical | 用户调整元素的高度 |

示例;

2.box-sizing属性

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。

例如,你需要并排放置两个带边框的框,可通过将 box-sizing设置为"border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法:

box-sizing:content-box|border-box;

可能的值:

(1)content-box:宽度和高度分别应用到元素的内容框;即在宽度和高度之外绘制元素的内边距和边框。

(2)border-box:为元素设定的宽度和高度决定了元素的边框盒。也就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.多列布局

通过CSS3,能够创建多个列来对文本进行布局 --就像报纸那样!在这里,我们将学习如下多列属性:

column-count 规定元素应该被分隔的列数。

column-width 该属性指定一个长度值,用于规定每个栏目的宽度。

column-gap规定列之间的间隔。

column-rule属性设置列之间的分割线的宽度、样式和颜色。

1.column-count

规定元素应该被划分的列数

语法:

column-count:number| auto;

可能的值:

|--------|---------------|
| number | 元素内容将被划分的最佳列数 |
| auto | 由其他属性决定的列数 |

2.column-width

规定栏目的宽度

语法:

column-width:auto| length;

可能的值

|--------|--------------|
| number | 指定栏目的宽度 |
| auto | 自动,由其他属性决定列数 |

3.column-gap

规定列之间的间隔

语法:

column-gap:length |normal

可能的值:

|--------|-----------------------------|
| length | 把列间的间隔设置为指定的长度 |
| normal | 规定列间间隔为一个常规的间隔,W3C建议用的值是1em |

4.column-rule

column-rule属性是一个简写属性,用于设置所有column-rule-*属性。设置列只觉得宽度,样式和颜色规则。

语法:

column-rule-width column-rule-style column-rule-color

相关推荐
Boilermaker199217 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子28 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102443 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构