标签：css3 box 颜色 val gradient 笔记 html5 child border

1.html5表单

1.1 新增input元素的种类

search:搜索输入框
tel:电话号码输入框
url:输入url地址
email:邮件输入框
number:数字输入框
range:特定范围内的数值选择器（通过拖动滚动条改变一定范围的数字）
color:颜色选择器 只在Opera和 Blackberry浏览器
datetime：显示完整日期和时间
datetime-local:显示当地时间
time：显示到时间
month：显示到月
week：显示到周

1.2 表单新特性

placeholder：输入框占位符，常用作输入提示，在光标聚焦时，占位符自动消失
autocomplete: 是否保存用户输入值，默认为on，关闭为off
autofocus：自动聚焦
required:此项必填，不能为空
Pattern：正则验证pattern="\d(1,5) "
form：只要加上form属性，表单元素可以放到页面的任意位置
formnovalidate和novalidate:表示不需要验证表单，直接提交
                           novalidate用于form
                           formnovalidate用于submit类型的提交按钮

1.3 表单验证

validity对象，通过下面的valid可以查看验证是否通过
     -oText.addEventListener("invalid",fn1,false);
     -valid:验证不通过是返回false
     -valueMissing:输入值为空时
     -typeMismatch:控件值与预期类型不匹配
     -patternMismatch：输入值不满足pattern正则
     -customError不符合自定义验证
         >>setCustomValidity();自定义验证

2.css3选择器

2.1 后代定位选择器

 ul>li:nth-child(n){}:选择第n个(子代)
 ul>li:first-child{}:选择第n个(子代)
 ul>li:last-child{}:选择第n个(子代)
 ul>li:nth-child(even/2n){}:选择偶数行
 ul>li:nth-child(odd/2n+1){}:选择奇数行
 kn、kn+1、kn+2.....kn+n,表示k循环

 nth-of-type(n){}:n表示特定类型的第n个(某一类的第n个)
 nth-last-child(n){}:倒数第n个子代
 only-child：只有一个子元素
 only-of-type:同种类型的子元素只有一个
 empty:无子元素空，连空行都没有

2.2 否定选择器

 :not   :not(:nth-child(1)):除了第一个

2.3 属性选择器

 例如：ul li[class="box"]
 E[attr=val]
 E[attr|=val] 只能等于val 或只能以val-开头
 E[attr*=val] 包含val字符串
 E[attr~=val] 属性值有多个，其中有一个是val
 E[attr^=val] 以val开头
 E[attr$=val] 以val结尾

2.4 目标伪类选择器

 :target 用来匹配url指向的目标元素
 存在url指向该元素时，样式效果才会生效

2.5 伪元素

 :first-line 匹配第一行文本
 :first-letter 匹配第一首字符
 :before和:after DOM元素前后插入额外的内容

3.边框-圆角 border-radius

border-radius:1-4个数字/1-4个数字
   前面是水平半径，后面是垂直半径
   四个数字方向分别是左上 右上 右下 左下
   
不给“/”则水平半径和垂直半径一样
 border-radius: 10px/5px;
 border-radius: 60px 40px 30px 20px/30px 20px 10px 5px;

4.线性渐变linear-gradient

linear-gradient:  
 只能用在背景上
 颜色是沿着一条直线轴变化
 参数:
background: linear-gradient(方向/角度, 颜色1 [起始位置, 颜色1, 结束位置],
            ... ,颜色n [起始位置, 颜色n, 结束位置])
 
 方向/角度：top | left | 度数45deg | top left | and so on
 起始位置/结束位置：百分比 | 像素
 重复的线性渐变：-webkit-repeating-linear-gradient:

5.径向渐变radial-gradient

radial-gradient:
 从“一个点”向多方向颜色渐变
 background: radial-gradient([shape/[size]] [at position], 颜色1 [起始位置, 颜色1, 结束位置], 
             ... ,颜色n [起始位置, 颜色n, 结束位置]);
 参数：
 
 shape形状：ellipse（椭圆）、circle（圆）或设置水平半径，垂直半径
 size：渐变的大小，即渐变到哪里停止，有如下关键词：
     closest-side:   最近边;farthest-side  : 最远边;
     closest-corner: 最近角;farthest-corner: 最远角;
 position: 关键词(top/top left) | 数值(10px 10px) | 百分比(50%/50% 50%)
 起始位置/结束位置：百分比 | 像素
 重复的径向渐变：-webkit-repeating-radial-gradient

6.背景background

(1) background-origin 区域显示
  padding-box:从padding区域显示  默认
  border-box:从border区域显示
  content-box:从content区域显示

(2) background-clip 裁剪
  padding-box:从padding区域向外裁剪
  border-box:从border区域向外裁剪 默认
  content-box:从content区域向外裁剪
  text 文本裁剪
  
(3) background-size 背景大小
  100% 100% 百分比
  10px 10px 数值
  contain   按原始比例收缩，背景图显示完整，但不一定铺满整个容器
  cover     按原始比例收缩，背景图显示不一定完整，但铺满整个容器
  
(4) background--attachment 
  背景图片是滚动的还是固定的 
  fixed 固定的 scorll 滚动的

7.阴影

(1)盒子阴影   box-shadow
  box-shadow: h v blur spread color inset;
  h: 水平方向偏移
  v: 垂直方向偏移
  blur: 模糊半径
  spread: 扩展半径
  color: 颜色
  inset: 加上这个表示内阴影 默认是外阴影

(2)文本阴影 text-shadow
  text-shadow: x y blur color
  x轴偏移 y轴偏移 模糊度 颜色
  多层阴影制作文字的立体效果，设置多种颜色，中间以逗号隔开

(3) 文字添加边框  text-stroke
  text-stroke: 2px blue
  通过设定1px的透明边框，可以让文字变得平滑
  颜色设成透明能创建镂空字体

8.多媒体标签

8.1 视频标签

 <video >
   <source src="" type = "">
   <source src="" type = "">
 </video>

8.2 音频标签

<audio>
       <source src="" type = "">
       <source src="" type = "">
     </audio>**

标签：css3,box,颜色,val,gradient,笔记,html5,child,border
来源： https://blog.csdn.net/qq_50937686/article/details/117378318

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。