CSS3学习笔记

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写一个冒号也是可以的;
  不加选择器的时候,就是全局样式;只对颜色有作用,其他样式没有修改作用*/

beforeafter插入内容


  • 基本语法
<!--不是只能添加文字,添加图片也是可以的,
但是必须有conten属性,可以设置为空值,但必须有该属性-->

选择器::before{content:"内容"; 属性:属性值;}/*在元素之前插入新内容*/
/*较常用于添加前缀,小图标*/

选择器::after{content:"内容"; 属性:属性值;}/*在元素之后插入新内容*/
/*可用于清除浮动,要记得转为块级元素*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值