CSS渐变与文本格式化

最新推荐文章于 2023-04-14 11:11:31 发布

小张biubiu

最新推荐文章于 2023-04-14 11:11:31 发布

阅读量175

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_45178455/article/details/102867247

版权

CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

一、渐变

1.什么是渐变
两种或多种颜色平滑过渡的效果
1.线性渐变
按照一个直线的方式去填充渐变
2.径向渐变
按照半径的方向去填充渐变
3.重复渐变
2.渐变的组成(元素)
色标：决定了渐变的每种颜色及其出现的位置
每一种渐变效果都是由多个色标组成的(2个及以上)
3.渐变的语法
属性：background-image
取值：
linear-gradient()：线性渐变
radial-gradient()：径向渐变
repeating-linear-gradient()：重复线性
repeating-radial-gradient()：重复径向

(一)、线性渐变

语法：background-image:linear-gradient(angle,color-point,color-point,color-point,…);
angle：方向或角度，即渐变的填充方向
值：
to top：从下向上填充
to right：从左向右填充
to bottom：从上向下填充
to left：从与右向左填充
角度：
0deg ~ 360deg
0deg：相当于to top
90deg：相当于to right
180deg：相当于to bottom
270deg：相当于to left
color-point：色标，表示每个颜色值，即其出现的位置，多个色标之间用(，)分割
ex：
1.red 0%
取决于方向和角度，开始的时候是红色
2.blue 50px
填充到第50像素是，变为蓝色
3.色标的位置可以省略
省略位置后采用默认方式，每个将平均分配元素区域

ex：
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
	#d1{
    	width:200px;
    	height:200px;
    	background-image:linear-gradient(45deg,red 0%,green 50%,pink 100%);
    	//从左下角到右上角进行填充，起始颜色为红色，中间颜色为绿色，末尾颜色为粉色。
	}
</style>
</head>
<body>
	<div id="d1"></div>
</body>
</html>

效果如下图：
在这里插入图片描述

(二)、径向渐变

语法：background-image：radial-gradient([size at position] 可以不写,color-point,color-point,…)
size at position：当前径向渐变以及圆心位置
size：圆的半径，px为单位
position：圆心位置
ex：
1. 0px 0px
将圆心设置在元素的左上角
2. 50% 50%
将圆心设置在元素的中间位置处
3. right bottom
关键字：top/right/bottom/left/center
将圆心设置在元素的右下角

ex：
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
	#d1{
    	width:400px;
    	height:400px;
    	border:1px solid transparent;
    		//这里为了装饰，给d1加一个1px的边框颜色为透明色。
    	border-radius:50%;
    		//作用同上，倒角为50%，把d1倒成一个圆形
    	box-shadow:0px 0px 15px yellow;
    		//作用同上，加一个x轴偏移0px，y轴偏移0px，颜色为黄色，距离为15px的模糊距离。
    	background-image:radial-gradient(100px at 50% 50%, red,orange,skyblue);
    		//圆心的半径为100px，把圆心设置在中心位置，渐变颜色为红色、橙色、天空蓝。
	}
</style>
</head>
<body>
	<div id="d1"></div>
</body>
</html>

效果如下图：
在这里插入图片描述

(三)、浏览器的主流版本均支持渐变效果

各主流浏览器的主流版本均支持渐变效果，对于不支持渐变的浏览器，可以尝增加浏览器的前缀去实现渐变的显示。
浏览器前缀：
Firefox：-moz-
Chromehe Safari：-webkit-
Opera:-o-
前缀的加载位置：
1.如果浏览器不支持属性的话，则将前缀加载到属性名称前
ex：
animation：scroll 5s;
-webkit-animation:scroll 5s;
-moz-anmiation:scroll 5s;
-o-animation:scroll 5s;

2.如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前面
ex：
background-image:linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();

二、文本格式化

(一)、字体属性

1.指定字体系列
属性：font-family
取值：value1,value2,…,…
注意：字体取值包含中文或特殊符号，使用""引用起来
为什么允许给这么多值，是因为当给某个元素指定好字体的时候，他会从第一个值开始匹配，能匹配上谁就用谁，后面的就不管了
ex：
font-family：“宋体”,“微软雅黑(microsoft yahei)”,Arial;
2.字体大小
属性：font-size
取值：px 或 pt 或 em
ex：
; font-size:24px;
3.字体加粗
属性：font-weight
取值：
1.normal 正常体
2.bold 粗体
3.400~900(整百)
400：normal
900：bold
Ps:normal太细bold太粗，正常体和粗体之间(可以自定义粗细)
4.字体样式
属性：font-style
取值：
1.normal 正常体
2.italic 斜体
5.小型大写字母
作用：针对英文字符，将小写字符变成大写字符，但是大小与小写一样
属性：font-variant
取值：
1.normal 正常
2.samll-caps 小型大写字母
6.字体属性
属性：font
取值：style variant weight size family
注意：使用简写属性时，必须设置family的值，否则无效
ex：
font:12px; --无效
font:12px “microsoft yahei”; --通过
ex：
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
<style>
	#d1{
    	font-family:"microsoft yahei",Arial;
    		//设置d1中字体为微软雅黑和Arial。
    	font-weight:700;
    		//d1中字体加粗为700。
    	font-style:italic;
    		//d1中字体样式为斜体
    	font-variant:small-caps;
    		//d1中字母设置为小型大写字母。
	}
	#d1 span{
    	font-weight:normal;
    	//设置d1中的span元素字体加粗为正常体。
	}
</style>
</head>
<body>
	<div id="d1">
    	这是一段文本，里面包含<span>English</span>、中文、粗体、斜体！！！
    	<br>
    	This is a text containing English、Chinese、 bold、 italic！！！
	</div>
</body>
</html>

效果如下图：
在这里插入图片描述

(二)、文本属性

1.文本颜色
属性：color
取值：任意合法颜色
2.文本排列方式
作用：指定当前元素中的文本，行内元素，行内块元素的水平对齐方式(块级元素不受文本排列所控制)
属性：text-align
取值：left/center/right
3.文字修饰
作用：指定文本的线条样式
属性：text-decoration:value;
取值：
1.none 没有线条显示
2.underline 下划线 =
3.overline 上划线
4.line-through 删除线 =
4.行高
作用：指定元素中一行数据的高度。如果行高的高度高于文字高度本身，那么该行文本将在行高的范围内呈现处垂直居中的显示效果
(弊端：只能完成一行数据，多行会溢出)
(可以改变两行文本之间行间距)
场合：
1.控制一行文本垂直居中对其
2.设置行间距
属性：line-height
取值：以px为单位的数值
5.首行文本缩进
属性：text-indent
取值：缩进的距离，以px为单位的数值
6.文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
ex：
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
<style>
	#d1{
    	font-family:"microsoft yahei";
    		//设置d1中字体为微软雅黑。
    	font-weight:700;
    		//设置字体加粗为700.
    	font-style:italic;
    		//设置字体样式为斜体。
    	font-variant:small-caps;
    		//设置英文字母为小型大写字母
    	color:orange;
    		//设置颜色为橙色。
    	text-align:center;
    		//文本格式为居中。
    	text-decoration:line-through;
    		//在文本中加删除线
	}
	#d1 span{
    	font-weight:normal;
    		//设置d1中span中文本字体加粗为正常体。
	}
	#d2{
    	width:300px;
    		//设置d2的宽为300px。
    	padding:40px 0;
    		//设置内边距上下40px，左右为0px。
    	text-shadow:5px -5px 5px red;
    		//设置文本阴影右偏移5px，偏移5px，阴影为红色。
	}
</style>
</head>
<body>
	<div id="d1">
    	这是一段文本，里面包含<span>English</span>、中文、粗体、斜体！！！
    	<br>
    	This is a text containing English、Chinese、 bold、 italic！！！
	</div>
	<div id="d2">
    	这还是一段文本
	</div>
</body>
</html>

效果如下图：
在这里插入图片描述

小张biubiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS渐变与文本格式化

1.渐变1.什么是渐变两种或多种颜色平滑过渡的效果1.线性渐变按照一个直线的方式去填充渐变2.径向渐变按照半径的方向去填充渐变3.重复渐变2.渐变的组成(元素)色标：决定了渐变的每种颜色及其出现的位置每一种渐变效果都是由多个色标组成的(2个及以上)3.渐变的语法属性：background-image取值：linear-gradient()：线性渐变radial-gra...
复制链接

扫一扫

专栏目录