阴影 shadow
分为块阴影box-shadow和文字阴影 text-shadow。
两者都有四个参数,分别是:右偏移量 下偏移量 模糊距离 阴影颜色。
当模糊距离为负数时,阴影不可视。
描边 stroke
只在weikit内核的浏览器中适用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html{
font-size: 62.5%;
}
p{
height: 7rem;
width: 300px;
line-height: 7rem;
text-align: center;
margin: 0 auto;
font-size: 3rem;
}
.p1{
background-color: #d5d2c2;
color: transparent;
-webkit-text-stroke: 0.5px black;
/* 描边,不是所有浏览器都兼容 */
/* 在前加-webkit-,Chrome浏览器可识别 */
}
.p2{
background-color: #454545;
color: #333;
text-shadow: -1px -1px 0 #cecece, 1px 1px 0 #5c5c5c;/* 添加两组阴影在同一文字上 */
}
.p3{
background-color: black;
color: #fff;
text-shadow: -5px -5px 8px hotpink,/* 左上角阴影 */
5px -5px 8px hotpink,/* 右上角阴影 */
-5px 5px 8px hotpink,/* 左下角阴影 */
5px 5px 8px hotpink;/* 右下角阴影 */
}
.p4{
background-color: #ccc;