随笔分类 - HTML5+CSS3
摘要：<style> #sanjiao{ width: 0px; height: 0px; border-top:10px solid black; border-left: 10px solid transparent; border-right: 10px solid transparent; } <
阅读全文
摘要：css3新增了text-overflow属性，该属性可以设置超长文本省略显示， 语法: rext-overflow:clip|ellipsis|ellipsis-word clip属性值表示不显示省略标记(…)，而是简单的裁剪 ellipsis属性值表示当前对象内文本溢出时显示省略标记(…)，省略标
阅读全文
摘要：Flex 布局语法教程 分类 编程技术 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Fl
阅读全文
摘要：为了增强用户体验，CSS3增加了很对的新属性，其中一个重要的属性就是resize，它允许用户通过拖动的方式改变元素的尺寸，到目前为止，主要用于可以使用overtflow属性的任何容器元素中 resize：none | bth |Horizontal | vertival | inherit none
阅读全文
摘要：CSS3改善了传统盒模型架构，增强盒子构成要素的功能，扩展了盒模型显示的方式，具体描述如下 改善构造：除了传统的内容区域，边框区，补白区和边界区外，为盒子新增了轮廓区。 增强功能：内容增强CSS自动添加内容功能，增强内容溢出、换行处理，匀速多重定义背景图，控制背景图显示方式等；增加背景图边框，多重边
阅读全文
摘要：html5新增了一个datalist元素，可以实现数据列表的下拉效果，气外观类似autocomplete，用户可从列表中选择，也可自行输入，而list用户指定输入框绑定哪一个datalist元素，其值是某个datalist的ID
阅读全文
摘要：2D空间和3D空间 2D：x 、y 3D：x、y、z 可以使用transform属性将HTML元素在3D空间内 一个就简单的例子 这样的话 图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面 perspective：10
阅读全文
摘要：逐帧动画：组成动画的每一个画面就是一个帧（也是关键帧动画，每一帧都是关键帧，没有过度帧生成部分） 关键帧动画：将动画的第一帧和最后一帧设置为关键帧，其他部分由系统完成(过度帧自动生成)。 @keyframes规则 animation属性 webkit内核的浏览器 webkit内核的浏览器需要加-we
阅读全文
摘要：一个元素在不同的状态之间进行平滑的交换 CSS3中使用transition属性实现过度效果 一个简单的例子： 如果我们给img元素添加以下代码 那么整个图片旋转的时候会显得很完美、平滑 语法： transition：过度属性 执行时间 时间函数 延迟时间； 过度属性：可选值。指定将要进行过度变换的C
阅读全文
摘要：转换：就是使用transform属性将html元素 2D转换：在二维空间内转换 x,y 3D转换：在三维空间内转换 x,y,z 移动 translate：将元素在x轴或y轴上进行移动 实例：transform：translate（20px，30px）； x轴上像右移动20px，在y轴上像下移动30p
阅读全文
摘要：CSS3 允许你为一个元素设置多张背景图片 效果 简写形式： background-size： 长度：设置北京图片高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出第I个值， 第二个是“auto” 自动 百分比：相对于所在区域的百分比，第一个值设置宽度，第二个值设置高度，如果只给出一个值，
阅读全文
摘要：box-sizing属性 用来改变盒模式中的宽度和高度默认的计算方式。 box-sizing： 1.content-box（默认值）： 宽度和高度只包含内容区域 2.border-box： 宽度和高度包含内容区域、padding和border
阅读全文
摘要：CSS3提供了创建颜色渐变的方式，在两个或更多的颜色之间进行平滑色过度。 浏览器支持两种颜色渐变 线性渐变： to bottom:渐变的方向或角度 1.使用关键字表示方向：left right top bottom，left top、right top、、、、、、、、等 2.用数字表示角度：取值范围
阅读全文
摘要：Css3允许你使用opacity（不透明）属性设置元素的不透明度 实例： <img src="1.jpg" alt=“view”> img{ opacity：0.45； //45%不透明度 } 一个元素的opacity属性会应用到这个元素本身以及这个元素所有的子孙元素上
阅读全文
摘要：关键字颜色 red 十六进制颜色 #FF0000 RGB颜色 rgb（255，0,0） 新增的颜色表示方法 RGBa： RGB代表光的三原色，Red、Green和Blue CSS3中可以增加一个值a（alpha），表示颜色的透明度 Background-color：rgba（0,0,0,0.35）；
阅读全文
摘要：text-shadow(文本阴影) <h1>我有文字阴影</h1> h1{ color:#ffff00; text-shadow:1px 2px 2px #000000; } text-shadow: 横向偏移量（必选） 纵向偏移量（必选） 模糊范围（可选） 阴影颜色； text-overflow（
阅读全文
摘要：box-shadow：inset 横向偏移量 纵向偏移量 模糊范围 扩展范围 阴影颜色； 1.inset ：（可选） 内阴影，不设置inset，表示盒子外部显示一个投影。也可写在最后。 2.横向偏移量：（必选） 设置为正值，表示阴影相对盒子向右偏移。负值表示阴影相对盒子向左偏移 3.纵向偏移量：（必
阅读全文
摘要：设置规则： 一个值：四个圆角的值相同 两个值：第一个值为左上角与右下角，第二个值为右上角以左下角 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角 四个值：第一个值为左上角，第二个值为右上角，第单个值为右下角，第四个值为左下角 使用百分比： 圆角半径分别是height和width
阅读全文
摘要：大部分标签（所有标签都有的属性） 全局属性 属性 描述 属性 描述 style 元素的内联样式 trabskate 元素的值在页面载入时是否需要翻译 calss 元素的类型 contenteditable 是否可编辑元素的内容 id 元素的唯一id spellcheck 检测元素是否拼写错误 tit
阅读全文
摘要：表单验证是指，在用户提交表单之前，确保用户输入的数据时合法的。 输入类型： <div>邮箱：<input type="mail"></div> 1、type类型指定mail后，输入的格式必须为邮箱的格式 2、如qq@.com 不是这种格式会提示你重新输入 必填字段： <div>姓名：<input t
阅读全文
