1.1尝试新颖的CSS3特性

首先，我们来看一个具体的案例。https://code.juejin.cn/pen/7277536985772720139

1.2CSS3新特性简介和浏览器支持情况

新特性简介：

1）强大的CSS3选择器2）抛弃图片的视觉效果3）盒模型变化(多列布局和弹性盒模型 )4）阴影效果5）Web字体和web Font 图标6）CSS3过渡与动画交互效果7）媒体查询

什么是渐进增强和优雅降级？

1）渐进增强：指一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向上兼容，从非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。『向上兼容，先满足大多数浏览器』2）优雅降级：指一开始就构建站点的完整功能，然后针对浏览器测试和修复。相当于向下兼容，从复杂的现状开始，并试图减少用户体验的供给。优雅降级是从复杂的现状开始，并试图减少用户体验的供给。 『向下兼容，满足大多数用户使用的主流浏览器』1.3CSS3伪类选择器11）什么是伪类选择器?伪类选择器是CSS中的一种选择器，用来选择处于特定状态的元素。伪类选择器是CSS选择器的一种，它可以选择处于特定状态的元素，例如：链接（a:link）、已被访问的链接（a:visited）、激活的链接（a:active）、鼠标悬停链接（a:hover）、目标链接（a:target）等。伪类选择器的语法格式为：选择器：伪类名{属性：值;}。2）动态伪类选择器动态伪类选择器是CSS中的一种特殊类型的选择器，它可以基于元素当前所处的状态来选取元素。动态伪类选择器有：

  • :link：匹配所有未被访问的链接。
  • :visited：匹配所有已被访问的链接。
  • :hover：匹配鼠标指针浮动在其上的元素。
  • :active：匹配被用户激活的元素。
  • :focus：匹配获得焦点的元素。

3）UI元素状态伪类选择器

UI元素状态伪类选择器是根据元素状态来选择元素的一种CSS选择器，常见的UI元素状态伪类选择器包括以下几个：

  • E:enabled：用来指定当前元素处于可用状态时的样式。
  • E:disabled：用来指定当前元素处于不可用状态时的样式。
  • E:read-only：用来指定当元素处于只读状态时的样式。
  • E:read-write：用来指定当元素处于非只读状态时的样式。
  • E:default：用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。
  • E:indeterminate：用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。
  • E::selection：用来指定当元素处于选中状态时的样式。

Demo1.3https://code.juejin.cn/pen/72785151302691717751.4CSS3伪类选择器2结构伪类选择器1）什么是结构伪类选择器？结构伪类选择器是针对HTML的结构进行分类的选择器。结构伪类选择器根据文档结构来选择元素，常用于根据父级选择器里面的子元素，能大大减少HTML元素的id属性和class属性的依赖。结构伪类选择器的特征就是位置，分为三大类，一类是e:first-child、e:last-child、e:only-child、e:nth-child(n/even/odd)等，二类是e:first-of-type、e:last-of-type、e:only-of-type、e:nth-of-type等， 三类是e:root、e:empty、e:target、e:not等。Demo1.4https://code.juejin.cn/pen/72777925829555651121.5CSS3伪类选择器2结构伪类选择器

CSS3伪元素是CSS3的一个新特性，它可以帮助我们创建一些特殊的样式效果。伪元素之所以被称为伪元素，是因为他们不是真正的页面元素，HTML没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。
CSS3伪元素有四种类型：

  • ::first-letter：选取元素的第一行文字。
  • ::first-line：选取元素的第一行文字。
  • ::before：在元素内部的前面插入内容。
  • ::after：在元素内部的后面插入内容。

请注意，伪元素必须与真实的选择器一起使用，例如 p::before 或 h1::first-line。使用伪元素可以帮助我们简化HTML结构，而不需要额外的HTML标签。

Demo1.5 https://code.juejin.cn/pen/7277894226740772921

2.1CSS3用border-radius画圆形

Border-radius的优点：

  • 减少网站的维护工作量
  • 提高网站性能
  • 增加了视觉美观性

Demo2.1https://code.juejin.cn/pen/72779353368465244712.2CSS3画三角形和对话框三角形角尖相反的方向设置颜色值。若角尖朝左，则右边角设置颜色值。其他方向同理可得。1）三角形Demo2.2.1https://code.juejin.cn/pen/72781460580713103752）对话框Demo2.2.2https://code.juejin.cn/pen/72781495225585172892.3CSS3画菱形和平行四边形transform适用于盒模型元素来倾斜（skew）、旋转（rotate）、缩放（transform-origin）、位移（transform-origin）1）菱形

Demo2.3.1https://code.juejin.cn/pen/7278210215978205218

2）平行四边形

Demo2.3.2https://code.juejin.cn/pen/7278210662617055289

2.4 画五角星和六角星

Demo2.4https://code.juejin.cn/pen/7278269246235213865

2.5CSS3画五边形和六边形

Demo2.5https://code.juejin.cn/pen/7278288845534134307

2.6CSS3画心形和蛋形

Demo2.6https://code.juejin.cn/pen/7278511265814118460

2.7CSS3画太极阴阳图

Demo2.7https://code.juejin.cn/pen/7278601329470406667

3.1CSS3制作透明背景层

1）opacity: value|inherit;
属性值：
value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承

2）box-shadow:3px 3px 5px #888; /* x偏移量 | y偏移量 | 阴影宽度 | 阴影颜色 */

Demo3.1https://code.juejin.cn/pen/7278621775661891599

3.2 CSS3的颜色模式(1)

1）rgba(R,G,B,A)
R:红色值。正整数百分数
G:绿色值。正整数百分数
B:蓝色值。正整数|百分数
A:Alpha透明度。取值0~1之间

2）hsla(H,S,L,A)
H:Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色下也可取其他数值来指定颜色。取值为:0-360
S:Saturation(饱和度)。取值为 :0.0%-100.0%
L:Lightness(亮度)。取值为 :0.0% – 100.0%
A:Alpha透明度。取值0~1之间。

Demo3.2https://code.juejin.cn/pen/7278669706104422457

持续更新中。。。

鉴定完毕，欢迎友友们一起交流学习！！

本文来自博客园，作者：红石榴21，转载请注明原文链接：https://www.cnblogs.com/liushihong21/p/17694343.html