css学习5：元素的修饰

十、圆角

1.元素的四个角

- `border-top-left-radius`左上角

- `border-top-right-radius`右上角

- `border-bottom-left-radius`左下角

- `border-bottom-right-radius`右下角

2.圆角的取值

- 水平边和垂直边设置相同

- 1 个值代表四个角

- 2 个值代表左上和右下，右上和左下

- 3 个值代表左上，右上和左下，右下

- 4 个值代表 左上，右上，右下，左下

- 水平边和垂直边设置相同（了解）

- 水平边圆角/垂直边圆角

3.圆形

- 圆形,元素宽高一致`border-radius: 50%;`

- 椭圆形，元素宽高不一致`border-radius: 50%;`

 - 胶囊型`border-radius: 高度的一半;`

/* 圆形 */
.d2 {
	width: 100px;
	height: 100px;
	background-color: blue;
	border-radius: 50%;
}
/* 胶囊型 */
.d3 {
	width: 150px;
	height: 50px;
	border-radius: 25px;
	background-color: green;
}

十一、盒子阴影

1.盒子阴影的属性

- `box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内阴影`

- 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量（正负值）。

- 第三个值代表：模糊半径的大小（羽化）不允许负值。

- 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。

- 第五个值代表：颜色值。

- 第六个值（可选）代表：阴影向内 inset：默认阴影向外扩散。

/*     x轴偏移 y轴偏移 羽化  扩展 颜色 */ box-shadow: 15px 14px 10px 20px #666; /*  x轴偏移 y轴偏移 羽化  扩展 颜色 内阴影*/ box-shadow: 3px 5px 5px 0 green inset;

 【扩展】 立体球

 2. 多阴影

- 盒子阴影可以设置多层

- 每一个阴影效果为一组，中间用逗号分隔阴影组

.d4 {
	width: 200px;
	height: 200px;
	background-color: black;
	box-shadow: 5px 10px 10px 0 red, 15px 20px 10px 0 green;
}

【练习】

> 模拟日食效果

 > 背景色黑色，月牙白色，需要多阴影效果

body {background-color: black;}
div {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: black;
	box-shadow: 20px 0 50px -10px #fff, -20px 0 0 0 #fff inset;
}

【练习】

> 利用圆角和阴影制作以下立体按钮

button{
    margin-top: 20px;
    width: 200px;
    height: 100px;
    border: none;
    border-radius: 50px;
    background-color:rgb(97, 183, 233);
    box-shadow: 0 6px 0 0 rgb(21, 123, 182);
}

十二、光标设置

- `cursor: default;`箭头

- `cursor: pointer;`小手

- `cursor: wait;`等待

- `cursor: text;`文本

- `cursor: crosshair;`十字

- `cursor: progress;`箭头+等待

- `cursor: help;`箭头+问号

十三、元素特有样式

1.表单轮廓

- `outline`属性

- 简写`outline:width style color;`

- input 标签有默认的轮廓线，清空轮廓线`input {outline: none;} 或 {outline: 0;}`

2.列表样式

- `list-style` 属性是一个简写对属性集合

- `list-style`简写，`list-style:none`去掉标识(常用)

- 分开写样式包括:

  - `list-style-type`列表标记

    - `list-style: none;`没有标记

    - `list-style: disc;`默认实心圆点

    - `list-style: circle;`空心圆点

    - `list-style: '♥';`自定义圆点

  - `list-style-image`设置列表标识为小图片

    - url()使用绝对路径或者相对路径

    - 最好放小图，图标大小无法设置

  - `list-style-position`设置标识在 li 的定位

    - `list-style-position: outside;`默认在 li 外

    - `list-style-position: inside;`默认在 li 里