码迷,mamicode.com
首页 > Web开发 > 详细

css3基础

时间:2017-08-02 23:35:25      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:分数   改变   safari   圆心   convert   宽度   line   cal   nbsp   

CSS3 私有前缀

  • -webkit- chrome/safari等webkit内核浏览器
  • -moz- firfox
  • -o- opera
  • -ms- IE

CSS3 盒子模型

  • box-sizing 值 content-box(默认) / border-box(把盒子的内边距,边框都算进去)
  • resize 改变文本框的尺寸大小 值 none / horizontal / vertical / both
  • outline outline:width style color
  • outline-width 外轮廓宽度
  • outline-color 外轮廓颜色
  • outline-style 值 同border-style solid / dotted / dashed ...
  • outline-offset 外轮廓距离border的距离
  • outline:none,使文本框原有的颜色去除
  • display

CSS3 长度单位

绝对单位

  • mm
  • pt
  • p
  • pc
  • q

相对单位

  • px 像素
  • em 相对于当前对象内文本的字体尺寸,若当前字体尺寸未被人为设置,则相对于浏览器默认字体大小
  • ex 默认字体大小一半 若当前字体尺寸未被人为设置,则相对于浏览器默认字体大小
  • rem 相对于根元素(即html元素)字体大小 的倍数
  • vw 相对于视口(窗口)的宽度。适用于响应式宽度
  • vh 相对于视口(窗口)的高度。
  • vmax 相对于视口的宽度或高度中较大的那个
  • vmin 相对于视口的宽度或高度中较小的那个
重点rem vw

CSS3 颜色

设置半透明

  • opacity 0~1之间的小数,不透明度,值越大,越不透明(IE不兼容)
  • IE兼容的写法:filter:alpha(opacity=透明值)

颜色值

  • hex 16进制
  • colorname 用颜色关键字指定颜色
  • rgb 正整数(0~255)/百分数(0~100%)
  • rgba a代表透明度
  • hsl h代表色调 s饱和度 l亮度
  • hsla h代表色调 s饱和度 l亮度 a透明度
  • transparent 透明
opacity和rgba的区别:
opacity:背景图片与文字均透明而rgba只会使背景透明,字不会透明 filter:alpha(opacity=50)也会使文字背景图片均透明

CSS3 渐变

线性渐变

  • linear-gradient(方向, 色标1 色标1位置(渐变起始位置), 色标2, 色标2位置(渐变终止位置))
  • linear-gradient(to right, red 10px, purple 100px)
  • 方向: to left /to top /to right/to bottom / angle (0-360deg)

径向渐变

  • radial-gradient(形状 半径 at 圆心, 色标 色标位置, 色标, 色标位置)
  • 形状: ellipse / circle
  • 半径: length, 百分比,closest-corner/closest-side/farthest-side/farthest-corner
  • 位置 left/center/right top/center/bottom,
  • 默认是椭圆(ellipse)
径向渐变的位置问题
  • 位置决定了圆心的位置,如果提供了一个,另外一个默认为50%;若提供了两个,则一个是横坐标另一个是纵坐标。
  • 可以用percentage length指定径向渐变圆心的坐标。可以为负值。
  • 可用left center righ top center bottom设置圆心位置

重复渐变

  • repeating-linear-gradient 重复线性渐变
  • repeating-radial-gradient 重复径向渐变
  • 属性类似linear-gradient,radial-gradient

css3基础

标签:分数   改变   safari   圆心   convert   宽度   line   cal   nbsp   

原文地址:http://www.cnblogs.com/zgh929/p/7277068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!