CSS3-7.3-CSS3其他常用属性

最新推荐文章于 2022-08-03 17:08:25 发布

anh_qwh

最新推荐文章于 2022-08-03 17:08:25 发布

阅读量256

点赞数 1

分类专栏： WEB前端 CSS 文章标签： CSS3线性渐变 CSS3径向渐变 CSS3多列属性

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/100922756

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

CSS3-7.3-CSS3其他常用属性

一：CSS3渐变效果
- 1、线性渐变
- 2、径向渐变
二：CSS3多列属性

CSS3其他常用属性
1.CSS3渐变效果
2.CSS3多列属性

一：CSS3渐变效果

CSS3渐变效果
1.线性渐变
2.径向渐变

渐变的四个属性
1.linear-gradient：用线性渐变创建图像
2.radial-gradient：用径向渐变创建图像
3.repeating-linear-gradient：用重复的线性渐变创建图像
4.repeating-radial-gradient：用重复的径向渐变创建图像

1、线性渐变

linear-gradient
属性值
- point：设置渐变的起始位置
  - left、right、top、bottom以及角度值
- color-stop：设置渐变的起始颜色，可以写多个
  - 颜色与颜色之间用逗号相隔
- color-stop：设置渐变的终点颜色

/* CSS3线性渐变基本语法 */
div{
	/* Webkit引擎线性渐变语法 */
	background:-webkit-linear-gradient(left,red,blue);
	/* Presto引擎线性渐变语法 */
	background:-o-linear-gradient(left,red,blue);
	/* Gecko引擎线性渐变语法 */
	background:-moz-linear-gradient(left,red,blue);
	/* Trident引擎线性渐变语法 */
	background:-ms-linear-gradient(left,red,blue);
	/* W3C标准语法 */
	background:linear-gradient(to right,red,blue);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3线性渐变</title>
	<style type="text/css">
		div{
			height: 50px;
		}
		/* 用线性渐变创建图像 */
		.div1{
			background:linear-gradient(to right,red,blue);
		}
		/* 用重复的线性渐变创建图像 */
		.div2{
			background:repeating-linear-gradient(to right,red,blue);
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

效果图
在这里插入图片描述

2、径向渐变

radial-gradient
属性值
- position：设置渐变的圆心位置
  - left、right、top、bottom、center
  - 数值与百分数（可以是负数）
- shape：用于定义渐变的形状
  - circle：圆形渐变
  - ellipse：默认，椭圆形渐变
- size：用来确定径向渐变的结束形状大小
  - closet-side
  - closet-corner
  - farthest-side
  - farthest-corner：默认
- color-stop：设置渐变的终止颜色

/* CSS3径向渐变基本语法 */
div{
	/* Webkit引擎线性渐变语法 */
	background:-webkit-radial-gradient(red,green,blue);
	/* Presto引擎线性渐变语法 */
	background:-o-radial-gradient(red,green,blue);
	/* Gecko引擎线性渐变语法 */
	background:-moz-radial-gradient(red,green,blue);
	/* Trident引擎线性渐变语法 */
	background:-ms-radial-gradient(red,green,blue);
	/* W3C标准语法 */
	background:radial-gradient(red,green,blue);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3径向渐变</title>
	<style type="text/css">
		div{
			height: 150px;
			width: 200px;
		}
		/* 用径向渐变创建图像 */
		.div1{
			background:radial-gradient(red,green,blue);
		}
		/* 用重复的径向渐变创建图像 */
		.div2{
			background:repeating-radial-gradient(red,green,blue);
		}
	</style>
</head>
<body>
	<div class="div1"></div> <br>
	<div class="div2"></div>
</body>
</html>

效果图
在这里插入图片描述

二：CSS3多列属性

通过使用CSS3的多列属性可以将文本内容分成多列

CSS3多列属性
1.columns：列的宽度与列数的简写属性
2.column-count：规定元素被分割的列数
3.column-width：规定每个列的宽度
4.column-rule：列的宽度、样式和颜色的简写属性
5.column-rule-width：规定两列间边框的宽度
6.column-rule-style：规定两列间边框的样式
7.column-rule-color：规定两列间边框的颜色
8.column-gap：设定每个列之间的距离

1、columns

列的宽度与列数的简写属性
- 无书写顺序
- 可只写一个

2、column-count

规定元素被分割的列数
属性值
- 自定义列数
- 可以是auto，由其他属性决定列数，如column-width

3、column-width

规定每个列的宽度
属性值
- 带像素单位的数值
- auto

4、column-rule

列的宽度、样式和颜色的简写属性
- 无书写顺序
- 可只写一个或两个

5、column-rule-width

规定两列间边框的宽度
属性值
- thin：细边框
- medium：中等边框
- thick：粗等边框
- 自定义边框宽度：带像素单位的数值

6、column-rule-style

规定两列间边框的样式
属性值
- none：无样式
- hidden：隐藏样式
- dottted：点状线
- dashed：虚线
- solid：实线
- double：双线

7、column-rule-color

规定两列间边框的颜色

8、column-gap

设定每个列之间的距离
属性值
- normal
- W3C建议的值是 1 em
- 带像素单位的数值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>column</title>
	<style type="text/css">
		.column{
			/* 规定元素被分割的列数 */
			column-count: 2;
			/* 列的宽度、样式和颜色 */
			column-rule: dotted 5px blue;
		}
	</style>
</head>
<body>
	<div class="column">columns：列的宽度与列数的简写属性。column-count：规定元素被分割的列数。
    column-width：规定每个列的宽度。。。column-rule：列的宽度、样式和颜色的简写
    column-rule-width：规定两列间边框的宽度。column-rule-style：规定两列间边框的样式。
    column-rule-color：规定两列间边框的颜色。column-gap：设定每个列之间的距离。
</body>
</html>