CSS圆角边框、盒子阴影、文字阴影（01-07课）

01、综合案例-快报模块布局分析

1、大盒子div
2、分2个小盒子（上盒子为标题h，下盒子为列表（无序列表））

02、03、04、综合案例-快报制作

1、头部制作
2、快报模块列表制作

代码：

<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购快报</title><style>* {margin: 0;padding: 0;}li {/* 去掉所有的li前面的小圆点 */list-style: none;}.box ul {padding-left: 21px;padding-top: 7px;}.box ul li {height: 23px;/* 文字垂直居中 */line-height: 23px;}.box ul li a {color: #666666;text-decoration: none;font-size: 12px;}.box ul li a:hover {text-decoration: underline;}.box {width: 248px;height: 163px;border: 1px solid #cccccc;margin: 100px auto;}.box h3 {height: 32px;/* 只需要制作下边框 */border-bottom: 1px dotted #cccccc;font-size: 14px;font-weight: 400;line-height: 32px;/* 不能用margin来让文字左移，因为盒子也会左移，虚线就露出来了，要用padding,而且由于h3没有给出宽度，padding不会撑开 */padding-left: 15px;}</style>
</head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">爱如嘎普爱肝日诶</a></li><li><a href="#">咖喱UR股哈根</a></li><li><a href="#">噶人笔录哈六人行宫</a></li><li><a href="#">奥瑞格刘荣华拉UR个</a></li><li><a href="#">累啊壶盖好尬u</a></li></ul></div>
</body></html>

04、圆角边框原理和使用`border-radius`

1、语法border-radius:length;（length越大，弧度越大）

2、radius半径原理：（椭）圆与边框的交集形成圆角效果
见图：（length为边缘4个圆的半径，因此length越大，弧度越大）

05、圆角边框的使用

1、length可以是半径的实际值、也可以是半分比的形式
eg1：圆形的做法：给一个正方形矩形中的CSS代码设置；

border-radius: 50%

！！！50%为弧度的最大值（无论是圆形还是椭圆），大于50%的都一样

eg2：如果是个矩形，length设为高度的一半，即可做成类似括号的那种形状

2、该属性是一个简写属性，其实有四个属性值，分别为：左上角、右上角、右下角、左下角（顺时针）border-top-left-radius\border-top-right-radius\border-bottom-right-radius\border-bottom-left-radius
如果是两个参数，则分别为：正对角的两个角、负对角的两个角

06、盒子阴影`box-shadow`

1、box-shadow属性为盒子添加阴影

2、语法格式：box-shadow : h-shadow v-shadow blur spread color inset;

eg：
（以下这一串值很实用）

 box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);

！！！默认为外阴影（outset），但是要用外阴影的话，不要写这个单词，否则无效
盒子阴影不占用内存空间，不会影响其他盒子排列

3、给盒子制作鼠标经过后就变化为阴影的效果：（很多盒子都有hover的操作，不止a一个）

        div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);}

07、文字阴影`text-shadow`

1、语法text-shadow: h-shadow v-shadow blur color;

eg：

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);

（不是很常用）