一、阴影
1.1 盒子阴影
/* 盒子阴影:
第一个值:阴影的水平位置 正值往右 负值往左(必须写)
第二个值:阴影的垂直位置 正值往下 负值往上(必须写)
第三个值:阴影模糊的大小
第四个值:影子的大小 正值大 负值小 0和盒子一样大
第五个值:阴影的颜色 (默认黑色)
第六个值:内阴影外阴影 inset是内 默认就是外阴影
*/
/* box-shadow:0px 0px 10px 0px blue inset; */
/* box-shadow: 0px 0px 10px 0px blue,10px 10px 10px 5px yellow; */ 支持多阴影, 每组值之间用逗号分隔
box-shadow: 10px 10px;
1.2 文字阴影
/*
第一个值:阴影的水平位置 正值往右 负值往左(必须写)
第二个值:阴影的垂直位置 正值往下 负值往上(必须写)
第三个值:阴影模糊的值 默认是0
第四个值:阴影的颜色 默认和文字颜色一致
*/
/* text-shadow:10px 10px 5px #000; */
text-shadow: 10px 10px 5px #000,-10px -10px 5px yellow; 可以写多个阴影
二、用户界面
2.1 box-sizing属性
box-sizing:border-box;
box-sizing:content-box;
/* 宽度 = 内容+padding + border
宽度包含的有 内容 和 内边距 和 边框
高度同理
*/
box-sizing: border-box; /*怪异盒模型*/
box-sizing: content-box;/*标准盒模型 默认*/
三、选择器
3.1 属性选择器
/* css2 属性选择器 */
/* div[class="box"]{
color: red;
} */
/* div[id="div"]{
color: red;
}
/* css3*/
/* ^ 必须以谁开头 */
/* div[class^="box"]{
color: red;
} */
/* $ 必须以谁结尾 */
/* div[class$="box"]{
font-size: 50px;
} */
/* * 包含某个值 */
/* div[class*="box"]{
font-weight: bold;
} */
3.2 状态伪类选择器
/* 可用状态设置一个边框 */
input:enabled{
border: 2px solid red;
}
/* 让状态是checked的属性 设置宽度 */
input:checked{
width: 50px;
height: 50px;
}
/* 让状态是禁用时 设置一个背景颜色 */
input:disabled{
background-color: red;
}
3.3结构伪类选择器