8.2 css3 新增标签 盒子模型 长度单位 颜色 渐变 径像渐变
# 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边界作为参考点的,从0开始,正值从border边界往外延,负值从border边界往里缩。
* display: list-item: 指定对象为列表项目
* table-row: 指定对象作为表格行。类同于html标签<tr>
# CSS3 长度单位
### 绝对单位
* em
* mm
* pt
* p
* pc
* q
### 相对单位
* px
* em
* ex 默认字体大小一半
* rem 相对于根元素 html字体大小 的倍数
* vw 相对于视口的宽度。视口被均分为100单位的vw
* vh 相对于视口的高度。视口被均分为100单位的vh
* vmax
* vmin
### 设置半透明
* opacity 0~1之间的小数,不透明度,值越大,越不透明
.box01{
opacity:.5;
filter:alpha(opacity=50);
background-color:rgba(0,0,0,.5);
}
针对i8系统
opacity 效果是字体跟文字全部变透明
rbga 就北京变透明
### 颜色值
* hex 16进制
* colorname
* rgb
* rgba
* hsl
* hsla
* transparent
- H:
- Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
- S:
- Saturation(饱和度)。取值为:0.0% - 100.0%
- L:
- Lightness(亮度)。取值为:0.0% - 100.0%
-
# 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, 像素
转载于:https://www.cnblogs.com/lwwnuo/p/7275240.html
8.2 css3 新增标签 盒子模型 长度单位 颜色 渐变 径像渐变相关推荐
- CSS3 排版属性盒子模型 第二个模块
第05章-CSS3排版属性 CSS3排版属性 第05章-CSS3排版属性 学习目标 CSS 列表 案例01 CSS 隐藏 隐藏元素 CSS 显示属性 案例03 CSS 表格 案例04 表格隔行色 案例 ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- 关于CSS--基础样式、盒子模型和颜色
文章目录 CSS 1. 注释 2. 样式表的引用方法 3. CSS样式属性 (1). Backgrounds(背景) (2). Text(文本) (3). Font(字体) (4). 列表 (List ...
- html5盒子模型作业,HTML5盒子模型。
盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...
- 盒子模型的初识及css标签使用
CSS盒子模型 1.常用样式 2.盒子模型 * 3.定位(绝对定位 相对定位)* 4.CSS3常见效果 盒子模型介绍 常用样式 基础样式 样式名 描述 text-align 设置内容位置(指定块级元素 ...
- CSS学习(第三天)(层叠性、继承性、优先级,CSS 盒子模型)
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...
- css3新增的属性和用法
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀. 选择器 表单选择器 :focus 聚焦选择器 选择的是当下被聚焦的表单元素 input:focus {} :c ...
- css+css3层叠样式表标签汇总(笔记)
文章目录 CSS属性书写顺序(重点) 一.引入CSS样式表 1.1 行内式(内联样式) 1.2 内部样式表(内嵌样式表) 1.3 外部样式表(外链式) 二.CSS基础选择器 2.1 标签选择器 2.2 ...
- CSS3新增的视口单位Vh、Vw单位
定义 vw:浏览器可见视口[宽度]的百分比(1vw代表视窗[宽度]的1%) vh:浏览器可见视口[高度]的百分比(1vw代表视窗[高度]的1%) vmin:当前 vw 和 vh 较小的一个值. vma ...
最新文章
- FPGA之道(32)Verilog基本程序框架
- Divan and bitwise operations 异或,同或,组合数学(1500)
- Boost:双图bimap与property地图的测试程序
- zigbee zcl规范及其协议栈实现3 读取服务器端属性值
- 移动web开发适配rem
- Apache Cassandra和Java入门(第一部分)
- Java Secret:使用枚举构建状态机
- js hover图片放大不遮挡_CSS3+JS 实现放大镜
- html 百分比正方形,css实现未知宽度的正方形需求
- 通过标准的 ASP.NET 控件来使用 jQuery UI
- RabbitMQ学习之messageconver插件实现(Gson)
- 自定义异常并抛出,捕获
- vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口?
- 游戏挂机计算机自己保护怎么办,游戏中遇到玩家挂机该如何应对?做好这5件事可以降低输的机率...
- mysql视图创建以及权限
- 微信公众号JS-SDK获取当前经纬度及地址信息
- linux 查看任务管理器,LINUX查看进程的4种方法(小结)
- openldap中的Mirror mode模式中的主主同步
- 安装算量软件快速计算管道管件功能
- NVIDIA JETSON NANO三个版本核心的对比
热门文章
- 【linux】信号量的值定义
- [Redux/Mobx] 在redux中,什么是action?
- [react] render方法的原理你有了解吗?它返回的数据类型是什么?
- 前端学习(3288):object.define
- [html] 如何在不同的端口间共享cookie?
- 工作163:eachrt修改
- 前端学习(2556):vue插槽
- 前端学习(2552):vue简介
- 前端学习(2327):angular之双向绑定
- “约见”面试官系列之常见面试题之第七十一篇之let和var和const区别(建议收藏)