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

来源：互联网发布：俄罗斯军粮淘宝编辑：程序博客网时间：2024/05/29 19:39

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:

阅读全文

0 0