CSS3的rgba()背景颜色透明度和字体单位px、rem、vw还有字体的设置
时间：6年前 阅读：4683
CSS3 rgba用法
CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
基本语法:
R：红色值。正整数 （0~255）
G：绿色值。正整数 （0~255）
B：蓝色值。正整数（0~255）
A：透明度。取值0~1之间
二、字体单位
1、rem是相对于根元素<html>,这样就意味着，我们只需要在根元素确定一个参考值即可。
2、10vw相对于屏幕大小百分之10%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#hd{
width: 600px;
height: 400px;
font-size: 40px;
font-weight: 700;
color: white;
/*background: purple;*/
/*不透明*/
/* opacity: 0.7;*/
/*后面的0.6是调背景颜色透明度的*/
background: rgba(128,0,128,0.6);
}
/*-----------------------------------------------------------------------*/
/*rem是相对于根元素<html>,这样就意味着，我们只需要在根元素确定一个参考值即可。*/
/*html{
font-size: 20px;
}*/
/*h1{
font-size: 1.5rem; 是根html字体的1.5倍
}*/
/*p{
font-size: 0.8rem;
}*/
/*--------------------------------------------------------------*/
/*10vw相对于屏幕大小百分之10% */
p{
font-size: 10vw;
}
#kjrt p{
width: 400px;
height: 300px;
border: 3px solid blue;
font-size: 16px;
overflow: hidden;
/*强制不换行*/
white-space: nowrap;
/*clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string使用给定的字符串来代表被修剪的文本*/
text-overflow:ellipsis;
}
/*---------------------------------------------------------*/
span{
/*第一个是水平阴影的位置(10px就是阴影往右移10px; -10px就是往左移)，第二个是阴影垂直位置 第三个是模糊距离 第四个是阴影的颜色*/
text-shadow: 10px 0 10px purple;
}
/*------------------------------------------------------*/
#jretj{
width: 500px;
height: 300px;
background: blue;
margin: 100px auto;
/*第一个第二个第三个和上面的意思相同，第四个是阴影的尺寸（实心的） 第五个是阴影的颜色也是和上面的意思相同*/
box-shadow: 0px 0px 0px 30px red;
}
</style>
</head>
<body>
<div id="hd"> 03 rgba 字体单位</div>
<h1>03 rgba 字体单位</h1>
<p>03 rgba 字体单位</p>
<div id="kjrt">
<p> “其实没什么可说的，最简单与朴素的道理皆蕴含在平凡的事物中。古树折断，也许会死，因为生机早竭。如那韭菜，初种下时发黄且细弱，可是一茬又一茬的割过，却会愈发浓绿，逐渐粗壮。也如那蚕，若困于茧中，自会憋死、灭亡，可若是破茧而出，就会化成蝶，鲜艳亮丽，这是一次涅槃，超脱过去。”
柳神平静道来，波澜不惊，述说着在平常不过的事。
小不点的大眼则越发的明亮，看着它焦黑的树干，以及仅余的一根嫩绿的枝条，道：“也如柳神，于毁灭中焕发生机，将来会更强，这是一种磨砺，也是一场与众不同的修行，涅槃后必将远超过去。”
“你的悟性很好，但我的情况……你就不要乱联想了。”柳树传音，竟带着淡淡的笑意，难得有了情绪波动。
“柳神是你救了我吗？”小不点像是想起了什么，当初他是那么的虚弱，身体发生了严重的退化，差点都要死掉了。
山风吹来，那根绿莹莹的枝条拂动，柳树传音，道：“我如果给予你生机，你也只是活下来而已，将平凡的度过此生，起初我只是静静的看着。”
“我自己活下来的？”小不点讶然。</p>
</div>
<span>“小不点这里就是你的家，不管你是否知道了身世，我们也都是你的亲人。”一群中年女子说道。
而一群大老爷们则伸出粗糙的大手，揉了揉他的头，裂开大嘴笑道：“没什么大不了，我们石村连神明都诞生过，将来你必然是可与太古凶禽——金翅大鹏一战的强者，要知道，那可是能屠神的存在。”
“小不点不要哭，还有我们呢，我们是一起长大的好兄弟，将来有什么一起扛！”一群孩子也叫道。
“嗯！”小不点擦干了脸上的泪水，用力点了点头，族人对他很好，让他快乐长大，很开心，他的童年并没有被仇恨充斥。
当然，将来他必然要去那古国走上一趟，要去讨个说法！
“爷爷，我要变强！”小不点从来没有像今天这般渴望力量，然而他在石村的修行到了顶点，没有什么可学的了。
而那个古国，统驭亿万里山河，无比广袤，人口亿万万，多的难以想象，必然是天才辈出，代代有人杰惊世。</span>
<div id="jretj">
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论