阴影
box-shadow：盒子阴影（x轴，y轴，模糊距离，阴影半径拓展，阴影颜色，inset(内投影)）可以分别设置四边，性能杀手；
text-shadow：字体阴影（x轴，y轴，模糊距离，阴影颜色）；
颜色
rgba：rgba和opacity区别，只会对当前元素生效；
渐变
语法：background:linear-gradient(起始方向,color1,color2……) ；ps：第一个可以是to left，也可以是deg，颜色可以是rgba格式；
语法：background: radial-gradient((起始位置, 渐变形状, 渐变范围, start-color, …, last-color);ps：起始位置为xy轴的坐标默认为center，形状分为ellipse默认椭圆形，circle表示圆形。
渐变都可以使用百分比或者象素给颜色添加渐变距离。
字体
语法：@font-face
{
font-family: 字体名称;
src：链接…
font-stretch ，
font-style ，
font-weight ，
unicode-range ，
可选的，拉伸、样式、粗细，和支持的字符范围
}
背景
background-image：图片
background-size：尺寸
background-origin：定位区域border-box，padding-box（默认值），content-box
background-clip：裁剪 border-box，padding-box，content-box
border-image：图片链接，图片切割宽度，延伸方式（round，repeat，stretch拉伸）
border-position：图片定位
background-repeat:取消重复no-repeat
练手：导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: inline-block;
background: rgba(255, 165, 0, 1);
border-radius: 10px;
box-shadow: 0 5px 5px #666;
}
li{
display: inline-block;
border-right: 1px dashed #fff;
padding: 0 30px;
margin: 10px 0;
color: #fff;
font-size: 30px;
line-height: 20px;
text-shadow: 4px 4px 4px #888;
}
.last{
border: 0;
}
</style>
</head>
<body>
<div class="warper">
<div>
<ul>
<li>Home</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="last">6</li>
</ul>
</div>
</div>
</body>
</html>```
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
