在CSS3中，使用border-radius属性用于创建圆角

代码:

div{

border: 2px solid #b5b5b5;

border-radius: 5px;

width: 300px;

text-align: center;

background-color: lightgrey;

padding: 8px 16px;

box-shadow属性用来定义盒阴影。语法:box-shadow: x y z red。其中x、y、z代表3个方向偏移量

代码:

div{

border: 2px solid #b5b5b5;

border-radius: 5px;

width: 300px;

text-align: center;

background-color: lightgrey;

padding: 8px 16px;

box-shadow: 5px 5px 5px #949494;

}

.class-show ul li:hover{position: relative;top: -3px;left: 0;box-shadow: 0px 5px 5px #c8c8c8;}

.coachshow ul li:hover {

position: relative;

top: -3px;

left: 0;

box-shadow: 0px 0px 5px #c8c8c8, /*上边阴影 红色*/

-5px 0px 5px #c8c8c8, /*左边阴影 绿色*/

5px 0px 5px #c8c8c8, /*右边阴影 蓝色*/

0px 0px 5px #c8c8c8;

border-radius: 15px;

}

hover的效果设置 通俗的来说，就是当你鼠标停留在标签上面时，a标签的样式在原理样式的基础上，根据hover{}做出对应改变，如颜色改变，margin改变等，hover{}中没有重设的地方依然采取默认的样式。

ul.two

{ display:none; }

li#one:hover

{ display:block }

链接

链接1-1

链接1-2

如果用a#a1:hover来控制列表的颜色，

那么当光标移动到ul.two时，就会失效，因为光标离开了a#a1,a#a1:hover不再成立

如果用li#one:hover来控制列表的颜色，

那么当光标移动到ul.two时，不会失效，因为ul.two包含在li#one中，所以此时li#one:hover仍然成立。

inline-block的特点是结合inline和block两种属性的特定，可以设置width和height，并且元素保持行内排列的特性，基于这一点，所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。

background 背景颜色 font-size 字体大小

color 字体颜色 solid 实线 dotted 圆点 dashed 虚线 （边框的设置方式）

border 边框的线条大小

border-collapse（0） 边框的边距为0

margin outo 水平居中

使用一个包裹层将页面主题包裹起来，设置width和margin就可以使整个页面居中。

width是页面内容区的宽度，margin是外边距，将左右外边距设为auto后，变可以自动计算左右外边距导致页面居中。

background-size 100%背景色改大小

color 设置文本颜色

text-align：right ；设置元素水平对齐方式

text-indent：20px ；设置文本首行缩进

line-height：25px；设置文本的行高

text-decoration ：underline；设置文本装饰

underline 下划线

overline 上划线

line-through文字中间贯穿线

blink 闪烁

none无装饰

a:link 点击时（定义a元素未访问时的样式）

a:visited 访问后（定义a元素访问后的样式）

a:hover 鼠标悬浮（定义鼠标经过显示的样式）

a:active 点击未释放（定义鼠标单击激活时的样式）

在RGB基础上增加了控制alpha透明度的参数其中这个透明通道值为0~1

RGB十六进制方法表示颜色：有前两位表示红色分量，中间两位表示绿色分量最后两位表示蓝色分量

rgb（r，g，b，）正数值为0~255

text-shadow：color（阴影的颜色）x-offset（x轴移动用来指阴影水平移）y-offset（y轴移动阴影垂直位移动）blur-radius（阴影模糊半径）

box-shadow：color（阴影的颜色）x-offset（x轴移动用来指阴影水平移）y-offset（y轴移动阴影垂直位移动）blur-radius（阴影模糊半径）

list-style-type：none无标记符号

disc 实心圆 circle 空心圆 square 实心正方圆 decimac 数字

border-color 边框颜色

border 2px double red 四个边框

高级选择器：

body>div：nth-of-type（1）指定元素

background-color背景颜色

background-size背景图片大小

background-repeat：背景图片的重复方式

no-repeat：背景图片不重复方式

repeat-x背景图片水平重复

repeat-y背景图片垂直重复

background-position背景图片的位置

margin-top上边距

margin-right右边距

margin-last左边距

margin-bottom下边距

margin 0px out 去掉网页内边距

border-radius圆角

padding内边距依次顺序上，右，下，左

border-width

thin 定义细的边框。

medium 默认。定义中等的边框。

thick 定义粗的边框。

length 允许您自定义边框的宽度。

inherit 规定应该从父元素继承边框宽度。

标准文档流：只元素根据块元素和行内元素的特性按从上到下从左到右

display-block块级元素的默认值，元素背显示为块级元素该元素前后有换行符

display-inline内联元素的默认值，元素会显示为内联元素

display-inline-block行内块元素

display-noone设置元素不会显示

头部

身体

尾部 article独立的文章内容 aside相关内容和应用 nav导航辅助内容

标准文档流组成

块级元素（block）

列表 内联元素( inline )

float：left元素向左浮动

overflow: hidden;边框塌陷 清除塌陷

float：right元素向右浮动

float：none默认值，不浮动

lianear-gradient （red ，black）线性渐面

45deg角度

radial-gradien （20deg ，red，blue）劲向渐面

background-image: linear-gradient(to right, red , yellow)从左到右的线性渐变

repeating-radial-gradient(red, yellow 10%, green 15%);重复的径向渐面

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side

radial-gradient(closest-side at 60% 55%, red, yellow, black)渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）

farthest-side

radial-gradient(farthest-side at 60% 55%, red, yellow, black)与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。

closest-corner

radial-gradient(closest-corner at 60% 55%, red, yellow, black);渐变的边缘形状与容器距离渐变中心点最近的一个角相交。

farthest-corner

radial-gradient(farthest-corner at 60% 55%, red, yellow, black)渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

at中心点

relative 相对定位，保留原位置

absolute 绝对定位以浏览器窗口为基础为准进行定位

fixed 固定一个位置不动

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

z-index 属性值：整数，默认值为0

设置了position属性值时，z-index属性可以设置个元素之间的重叠高低关系

z-index值大的层位于值小的层上方

opacity：x x值为0~1越小越透明。opacity：0.4；

定位小结3-1

相对定位的特性

相对于自己的初始位置来定位

元素位置发生偏移后，它原来的位置会被保留下来

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合

绝对定位使用，为绝对定位创造定位父级而又不设

置偏移量

定位小结3-2

绝对定位的特性

绝对定位是相对于它的定位父级的位置来定位，

如果没有设置定位父级，则相对浏览器窗口来定位

元素位置发生偏移后，原来的位置不会被保留

层级提高，可以把标准文档流中的元素及浮动元

素盖在下边

设置绝对定位的元素脱离文档流

绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮 数字气泡特别花边的场景

定位小结3-3

固定定位的特性

相对浏览器窗口来定位

偏移量不会随滚动条的移动而移动

固定定位的使用场景

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

E【attr】 选择匹配具有属性attr的E元素

E【attr=val】 选择匹配具有属性attr的E元素并且属性值为val其中val（区分大小写）

E【attr~=val】 用于选取属性值中包含指定词汇的元素。

E【attr|=val】 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

E【attr^=val】 匹配属性值以指定值开头的每个元素。

E【attr$=val】 匹配属性值以指定值结尾的每个元素。

E【attr*=val】 匹配属性值中包含指定值的每个元素。9:02 2020/12/3

p默认情况下有上下间距 div没有，若想清除可以设置p{margin:0px;padding:0px;}，margin与padding同时也适用于css中p段落调整上下间距（而line-height由于值设置越大，段落间距和行距都会增加，不推荐）。

display：inline---- -block------inline-block---》改变元素的布局级别

1.display:inline--多个相邻元素排一行，直到占不下，宽度随着元素内容而变化，设置width，height无效

2.display：block--多个元素各自起新行，宽度自动填满父元素，可以设置width，height，padding，margin

3.display:inline-block--既具有block的宽度高度特性又具有inline的同行特性

示例如下:

1.链接一

宽高度设置无效

2.链接一

宽高度设置生效，自动生成两行

3.链接一

宽高度生效，且排列在同一行