十、圆角
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 里