20180529-前端学习日志-CSS文本样式(2)

1. 文本阴影属性text-shadow:

属性值为三个px值加颜色属性,如text-shadow:3px 5px 5px rgba(0,255,0,0.5)。第一个px是距离x坐标距离,第二个px是纵向距离,第三个是阴影范围。

2. 边框属性outline-

  • color边框颜色
  • style样式
  • width宽度
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Paragraph</title>
</head>
<body>
<h1 style="text-shadow:3px 5px 5px rgba(0,255,0,0.5);
outline-color:black;outline-style:double;outline-width:5px">报告题目:How to Publish a Paper with IEEE</h1>
<p style="color:red">报 告 人:李军  教授,青年千人,中山大学</p>

<p style="line-height:1.5">报告时间:2018年05月29日(星期二)14:00<br>

报告地点:中国矿业大学南湖校区环测学院B109<br>

主 持 人:郑南山  教授</p>

<p style="text-indent:2em; text-shadow:3px 5px 5px rgba(0,255,0,0.5);
outline-color:yellow;outline-style:double;outline-width:10px">个人简介:李军,中山大学,教授、博士生导师,2013年入选中组部青年千人计划,主要研究方向为高光谱图像处理,在混合像元分解、分类等领域取得了一些创新性成果;
在遥感与社交媒体数据融合处理领域开展了探索性研究。发表SCI论文60多篇,SCI他引1040次,8篇ESI高被引论文。
获IEEE GRSS青年成就奖。担任期刊IEEE JSTARS副编辑,PIEEE、ISPRS JP&RS等期刊客座编辑;SPIE HPC大会联合主席等。</p>
</body>
</html>

本次学习中遇到问题:

1. h1位置分号用成中文的分号导致没有显示出效果。

2. outline-width宽度没有写px导致没有出现效果。

总结:1. text-shadow:0px 5px 5px rgba(0,255,0,0.5)等关于颜色也可以用#00FF00这样的十六进制表示

2. 注意中英文符号差别

3. 使用边框宽度outline-width时注意不能丢失px


感谢 白夜轻穹 对代码的纠正

猜你喜欢

转载自blog.csdn.net/weixin_40582630/article/details/80498870