css3基础①

最新推荐文章于 2024-09-14 17:04:32 发布

XIANAN_

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量76

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_56103565/article/details/124752045

版权

请添加图片描述

🌸多重背景

CSS3背景 multiple backgrounds
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

①逗号隔开每组 background 的缩写值；
②如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
③如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
④background-color 只能设置一个。

	<body>
		<style>
			.cover {
			  background-image: url(../../xia/下载.jpg), url(../../xia/3.jpg);
			  background-position: right bottom, left top;
			  background-repeat: no-repeat, repeat;
			}

			.contain {
				background-size: contain;
			}

			.size {
				background-size: 50% 50%;
			}
		</style>
	</body>
	<div class="box">
		<div class="cover"></div>
		<div class="size"></div>
		<div class="contain"></div>
		<div>一个拥有多重背景的盒子</div>
	</div>

🌸盒阴影

①x偏移量 | y偏移量 | 阴影颜色

box-shadow: 60px -16px teal;

②x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色

box-shadow: 10px 5px 5px black;

③x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

④插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色

box-shadow: inset 5em 1em gold;

⑤任意数量的阴影，以逗号分隔

box-shadow:3px 3px red,-1em 0 0.4em olive

	<body>
		<style>
			.box{
			padding: 40px;
			width: 250px;
			height: 250px;
			margin: 0 auto;
			box-shadow: -10px -10px 10px 10px rgba(115, 115, 115, 0.4);
			}
		</style>
		<div class="box">一个带阴影的盒子</div>
	</body>

🌸轮廓

outline:只是一个效果不占位置

	<body>
		<style>
			.box{
				text-align: center;
				border-radius:40px 40px 40px 40px;
				width: 200px;
				height: 100px;
				border: 5px solid #55aaff;
				outline: 2px solid #00FF00;/*不能单独设置*/
			}
			button{
				outline:none;
			}
		</style>
		<div class="box">一个代码块</div>
		<button>按钮</button>
		<a href="">一个链接</a>
	</body>

🌸内嵌文字

@font-face 使用网络上的字体，不论用户是否有都可以使用

	<body>
		<style>
			@font-face {
				font-family:myfont;/*自定义字体的名称*/
				src: url(STLITI.TTF);/*自定义字体的来源*/
			}
			@font-face {
				font-family:;
				src: url(STLITI.TTF);
			}
			p{
				font-family: myfont;
			}
			p+p{
				font-family: myfont;
			}
		</style>
		<p>这是一个文字1</p>
		<p>这是一个文字2</p>
	</body>

🌸文字溢出

	<body>
		<style type="text/css">
			p {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		</style>
		<p> 文案，原指放书的桌子，后来指在桌子上写字的人。
		现在指的是公司或企业中从事文字工作的职位，就是以
		文字来表现已经制定的创意策略。文案它不同于设计师
		用画面或其他手段的表现手法，它是一个与广告创意先
		后相继的表现的过程、发展的过程、深化的过程， 多
		存在于广告公司，企业宣传，新闻策划等。</p>
	</body>

🌸文字阴影

	<body>
		<style type="text/css">
			p{
				color: #0000FF;
				text-shadow:4px 4px #000;
			}
			p+p{
				text-shadow: 4px 4px 4px #F00;
				             -4px -4px -4px #0f0
			}
		</style>
		<P>这个一个文本</P>
		<p>这是一个文字内容</p>
	</body>

🌸圆角边框

	<body>
		<style type="text/css">
			p{
				width: 200px;
				height: 100px;
				background-color: #f0f;
				border-radius:5px 10px 20px 40px;
			}
		</style>
		<p>一个代码块</p>
	</body>

请添加图片描述