CSS3核心特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Y_Tseng/article/details/82658051

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:"内容"; 属性:属性值;}/*在元素之后插入新内容*/
/*可用于清除浮动，要记得转为块级元素*/