CSS- 其他属性

最新推荐文章于 2021-08-04 03:39:48 发布

guardwhy

最新推荐文章于 2021-08-04 03:39:48 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109937655

版权

1.1 vertical-align

什么是vertical-align

设置元素的垂直对齐方式。

vertical-align注意点

text-align是设置给需要对齐元素的父元素。
vertical-align是设置给需要对齐的那个元素本身，vertical-align只对行内元素有效。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vertical-align</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	div{
		width: 400px;
		background: greenyellow;
		font-size: 40px;
		line-height: 100px;
	}

	img{
        /*
          默认情况下图片和一行文字的基线对齐
		  基线就是一行文字中最短那个文字的底部
		 */
        /*vertical-align: top;*/
        /*vertical-align: text-bottom;*/
		vertical-align: middle;
	}
  </style>
</head>
<body>
	<div>慕课网<img src="images/test1.png" alt=""></div>
</body>
</html>

执行结果

1.2 线性渐变

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

基本特点

默认从上至下。
可以通过to关键字的方式修改渐变的方向。
可以通过to deg的方式修改渐变的方向。

注意点

默认情况下自动回自动计算纯色和渐变色的范围, 但是也可以手动指定手动指定的格式: 颜色 范围。
只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>线性渐变</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.main{
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        /*
			注意点:
			至少需要传递2个颜色, 至多没有上限
			*/
        /*background: linear-gradient(to right, red, green, blue, yellow);*/
		background: linear-gradient(to right, rebeccapurple 100px, greenyellow 200px, cadetblue 300px);
	}
	.st1, .st2. st3{
        width: 100px;
        height: 100%;
        border: 1px solid #000;
        box-sizing: border-box;
        float: left;
	}
  </style>
</head>
<body>
	<div class="main">
	  <div class="st1"></div>
	  <div class="st2"></div>
	  <div class="st3"></div>
	</div>
</body>
</html>

执行结果

1.3 径向渐变

基本特点

默认从中心点向四周扩散。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>径向渐变</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 300px;
		height: 300px;
        border: 1px solid #000;

        /*background: radial-gradient(red, green);*/

        /*
		径向渐变: 可以通过at 关键字的方式修改开始渐变的位置
		*/

        /*background: radial-gradient(at top left ,red, green);*/

        /*
		径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置
		*/
        /*background: radial-gradient(at 200px 100px ,red, green);*/

        /*
		径向渐变也可以指定扩散的范围
		*/

        /*background: radial-gradient(100px, red, green);*/

        /*
		注意点:如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面
		*/
		background: radial-gradient(100px at 200px 100px, green, rebeccapurple);
	}
  </style>
</head>
<body>
	<div></div>
</body>
</html>