CSS Mastery2(11.6-透明度&引用&圆角)

最新推荐文章于 2022-08-18 09:02:50 发布

孤岛浅滩

最新推荐文章于 2022-08-18 09:02:50 发布

阅读量211

点赞数

分类专栏： notes 文章标签： displayblock CSS 笔记基础组合类

本文链接：https://blog.csdn.net/m0_37851778/article/details/73930052

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

11.6透明度/阴影/圆角
1.RGBa：第四个信道---处理透明度的alpha信道【0表示完全透明/1.0表示完全不透明】

2.组合类<div class="profile member">，可组合任意数量的类，只需将其用空格分隔。

code:

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	div.captioned_image{
		position:relative;
		width: 310px;
	}
	div.captioned_image p.caption{
		position: absolute;
		bottom:0;
		left:0;
		margin:0;
		color:#fff;
		font-size: 13px;
		line-height: 16px;
		font-style: italic;
		background:rgba(0,0,0,0.5);
		padding: 0;
	}
	div.yyc{
		border:5px solid #fff;
		border-radius: 5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		-webkit-box-shadow:1px 1px 5px #999;
		-moz-box-shadow:1px 1px 5px #999;
	}
	/*
	*****（two hours）
	1.用最少的HTML和CSS把问题还原。
	*/
	img{
		display: block;
	}
	</style>
</head>
<body>
	<div class="captioned_image yyc">
		<img src="images/campsite.jpg" alt="From the campsite">
		<p class="caption">
			From the campsite bridge towards the village, Great Gable and Lingmell.
		</p>
	</div>
</body>
</html>

Result: