CSS3学习笔记
目录
border-redius
圆角
- 基本语法
选择器{border-redius: 像素px/百分比;}
/*如果将正方形盒子的圆角值改为盒子像素值的一半或者设置为50%,
那么可以由正方形得到一个圆形*/
/*如果将一个长方形的盒子的圆角值设为该盒子高度的一半,可得到一个胶囊形*/
- 格式
border-redius:10px
/*代表四个角的值均为10px*/
border-redius:10px 20px
/*第一个值代表左上角和右下角,第二个值代表右上角和左下角*/
border-redius:10px 20px 30px
/*第一个值代表左上角,第二个值代表右上角和左下角,第三个值代表右下角*/
border-redius:10px 20px 30px 40px
/*从左上角开始,按照顺时针的方向旋转*/
- 单个属性
border-top-left-radius /*左上角*/
border-top-right-redius
border-bottom-left-redius
border-bottom-right-redius
border-top-left-radius: 80px 10px
/*水平方向80px,垂直方向10px,相当于圆心的位置改变了*/
border-redius: 80px/10px
/*加上斜杠表示x轴和y轴的值,相当于将每个角的值都变成了上述左上角设置的样式*/
border-redius: 50px 20px/10px
box-shadow
阴影
- 基本语法
box-shadow:X轴偏移 Y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型;
/*阴影模糊半径值越大,模糊的程度越大;
扩展半径会扩展阴影范围,可起到让颜色加重的作用;
阴影颜色如果使用rgb()值来表示,并用第四个值来设置透明度0.5,会让阴影显得更真实;
阴影类型有两种inset-内阴影、默认-外投影*/
注意
:
一个元素可添加多个不同的阴影,多个阴影也会重叠,最先写的阴影将会显示在最顶层:
box-shadow:10px 10px 10px red, 10px 10px 5px blue inset;
/*每套样式用逗号隔开*/
text-shadow
文字阴影
- 基本语法
text-shadow:X轴偏移 Y轴偏移 阴影模糊半径 颜色;
自定义字体
- 基本语法
@font-face{
font-family:字体名称;/*必填*/
src:字体路径;/*必填-url("文件夹/字体文件")*/
font-weight:字体粗细/*使用数值就行*/;
font-style:字体风格/*itali-倾斜
(前提是该字体有倾斜字体如果只需要给某一个添加样式,
最好在使用该字体的位置设置样式)*/;
}
/*用于大型项目的字体最好使用开源的字体;
定义多个字体时,要使用多个@font-face结构;
用的字体越多,加载越慢,对用户体验就不是很友好,一般使用一两个特殊字体就行*/
子元素选择器
- 常见的几种子元素选择器
元素选择器 | 意义 |
---|---|
:first-child | 父元素的首个子元素(选择组里面的某一个) |
:last-child | 父元素的最后一个子元素 |
:nth-child(n) | 父元素的某个子元素 |
:nth-last-child(n) | 父元素的倒数某个子元素 |
:first-of-type | 父元素下特定类型的首个子元素 |
:last-of-typd | 父元素下特定类型的最后一个子元素 |
:nth-of-type(2) | 父元素下特定类型的某个子元素 |
:nth-last-of-type(n) | 父元素下特定类型的倒数某个子元素 |
- 格式
选择器:first-child{属性:属性值;}
选择器:nth-child(5){属性:属性值:}
/*设置第五个元素的样式;
odd-设置奇数位的元素的样式;even-设置偶数位的元素的样式;
3n-设置位置为3的倍数的元素的样式;3n+1这种式子也是被允许的*/
选择器XX:first-of-type{属性:属性值;}
/*获取第一个为XX的元素*/
::selection
文字选中颜色
- 基本语法
选择器::selection{background: red; color:#fff;}
/*两个冒号表示伪类元素,若想兼容CSS2写一个冒号也是可以的;
不加选择器的时候,就是全局样式;只对颜色有作用,其他样式没有修改作用*/
before
和after
插入内容
- 基本语法
<!--不是只能添加文字,添加图片也是可以的,
但是必须有conten属性,可以设置为空值,但必须有该属性-->
选择器::before{content:"内容"; 属性:属性值;}/*在元素之前插入新内容*/
/*较常用于添加前缀,小图标*/
选择器::after{content:"内容"; 属性:属性值;}/*在元素之后插入新内容*/
/*可用于清除浮动,要记得转为块级元素*/