[自学第七天] 笔记小结

最新推荐文章于 2024-07-09 08:53:54 发布

__Cabbage

最新推荐文章于 2024-07-09 08:53:54 发布

阅读量64

点赞数

分类专栏：自学小结文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/m0_53892583/article/details/116462793

版权

自学小结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的新特性，包括选择器、阴影、形状转换、动画、边框、多重背景等，并强调了兼容性处理，如厂商前缀的使用。同时，讨论了CSS3在文本、颜色、渐变背景等方面的重要变化，以及如何处理文本溢出和边框效果。此外，还提到了CSS3在不同浏览器内核的支持情况，如Trident、Webkit、Gecko和Blink，并提供了针对国内双核浏览器的兼容建议。

摘要由CSDN通过智能技术生成

CSS3是CSS2.1的一个升级.它是对CSS的一个扩展.
CSS3的主要新特性:
1. 选择器
2. 阴影
3. 形状转换(2D<->3D)
4. 变形
5. 动画(过渡动画、帧动画)
6. 边框
7. 多重背景
8. 反射
9. 文字
10. 颜色(rgba/hsl/hsla)
11. 滤镜(filter)
12. 弹性布局
13. 多列布局
14. 盒模型
15. Web字体
16. 媒体查询
CSS3不是所有浏览器或同一浏览器的不同版本都支持,所以需要做兼容处理.通常的做法就是加厂商前缀.
1. 主流浏览器内核(面试点)
  a) Trident:IE内核
  b) Webkit:Chrome和Safari内核
  c) Gecko:FireFox内核
  d) Blink(是Webkit一个分支):Chrome和Opera内核
  Tips(技巧):
  目前国内的浏览器大多都是双核的(IE内核+Chrome内核)
2. 厂商前缀
  IE: -ms-
  Chrome和Safari: -webkit-
  FireFox: -moz-
  Opera: -o-
CSS3选择器
丰富选择的目的,减少class和id属性的使用
1. 属性选择器
  [属性名]
  [属性名=属性值]
  [属性名^=属性值]
  [属性名$=属性值]
  [属性名*=属性值]
2. 结构性伪类
  :first-child
  :last-child
  :nth-child(n)
  :nth-last-child(n)
  :nth-of-type(n)
  :nth-last-of-type(n)
  :only-child
  :only-of-type
  :empty
3. 目标伪类
  :target
4. UI元素状态伪类
  :checked (只在Opera浏览器中有效)
  :disabled
  :enabled
  ::selection
5. 否定伪类
  :not()
6. 通用兄弟元素选择器
  ~

CSS3文本

文本阴影(主流浏览器都支持)
text-shadow:水平偏移垂直偏移模糊度阴影颜色;
文本自动换行(主流浏览器都支持)
word-wrap:normal|break-word
单词拆分(主流浏览器都支持)
word-break: normal|break-all|keep-all;
文本拆分(所有主流浏览器都不支持)(可以忽略)
text-wrap: normal|none|unrestricted|suppress;

文本溢出

         a)单行文本溢出(重要)  
         text-overflow: clip|ellipsis|string;  
             处理文字溢出样式:  
                 width: px/%/em/rem....;  
                 white-space:nowrap;/*不允许折行*/  
                 -ms-text-overflow: ellipsis;/*处理IE兼容*/  
                 text-overflow:ellipsis;  
                 overflow:hidden;  
         b)多行文本溢出(IE9以下的版本不支持,主要是谷歌支持)  
             display:-webkit-box;  
             -webkit-box-orient:vertical;  
             -webkit-line-clamp:行数;  
             overflow:hidden;

CSS3边框

圆角边框(掌握)
border-radius: 1-4 length|% / 1-4 length|%;
四个方位的词:top-left/top-right/bottom-left/bottom-right
2) 边框阴影(IE9以上支持)
box-shadow:水平偏移距离垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset]
3) 边框图片(IE11.0以后的版本支持)
border-image: 图片向内偏移距离宽度图像区域超出边框的距离重复效果;
重复效果: round/stretch/repeat

CSS3背景
1. 多重背景
  background: 背景色背景图片平铺方式位置,背景色背景图片平铺方式位置,…
2. background-size:设定背景图像的尺寸.
  background-size: 固定长度:百分比值|cover|contain;
3. background-origin:属性指定了背景图像的位置区域.
  background-origin: padding-box|border-box|content-box;
4. background-clip:设定背景的绘制区域.
  background-clip: border-box|padding-box|content-box;
5. 渐变背景
  background-image: 线性渐变|径向渐变
CSS3颜色
1. RGBA
  rgba(r,g,b,a)
  r:红色取值范围:0-255/0-100%
  g:绿色取值范围:0-255/0-100%
  b:蓝色取值范围:0-255/0-100%
  a:不透明度取值范围:0-1的一个小数
2. HSL
  hsl(h,s,l)
  h:色调取值范围:0-360
  s:饱和度取值范围:0-100%
  l:亮度取值范围:0-100%
3. HSLA
  hsla(h,s,l,a)
  h:色调取值范围:0-360
  s:饱和度取值范围:0-100%
  l:亮度取值范围:0-100%
  a:不透明度取值范围:0-1的一个小数
opacity
调整元素的不透明度,大多数情况下用于做元素的遮罩效果. 取值范围:0-1的一个小数
IE8及8以下版本不支持opacity.处理兼容的方式,再添加一行代码来处理不透明度
filter:alpha(opacity=数值) 数值的范围:0-100
CSS3渐变
渐变主要用来设置背景或制作三维图.
1. 线性渐变
  background: linear-gradient(方向或角度,颜色1 百分比,颜色2 百分比,…);
  方向:
  to left:从右向左渐变
  to right:从左向右渐变
  to top:从下向上渐变
  to bottom:从上向下渐变
  to top left:从右下角向左上角渐变
  to top right:从左下角向右上角渐变
  to bottom left:从右上角向左下角渐变
  to bottom right:从左上角向右下角渐变
  角度:
  比如45度角,应该表示为: 45deg
  颜色取值:
  1. 表示颜色的单词
  2. 16进制颜色
  3. 表示颜色的函数(rgb()/rgba()/hsl()/hsla()/…)
2. 径向渐变
  background: radial-gradient(形状渐变大小 at 位置,颜色1 百分比,…,颜色n 百分比);
  形状:
  ellipse:椭圆径向渐变(默认值)
  circle:圆径向渐变
  渐变大小:
  farthest-corner:渐变的半径长度为从圆心到圆心最远的角(默认)
  closest-side:渐变的半径长度为从圆心到离圆心最近的边
  closest-color:渐变的半径长度为从圆心到圆心最近的角
  farthest-side:渐变的半径长度为从圆心到离圆心最远的边
  位置:
  center:设置圆心在中心位置(默认值)
  top:设置圆心在顶部位置
  bottom:设置圆心在底端位置
  at 圆心横坐标圆心纵坐标:设定圆心的位置在指定的(横坐标,纵坐标)处
3. 文字渐变
  background-image:线性渐变或径向渐变;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
box-sizing
允许你以某种方式定义某些元素,以适应指定的区域.
box-sizing: content-box/border-box (火狐需要写厂商前缀)