【简抄】h5 新增的几个背景属性和文本属性
一、背景图像显示:
①background-size:规定背景图像的大小;
值:像素值、百分比、auto、cover、contain
②background-origin :规定背景图像的起始位置;
值:padding-box(默认)、content-box、border-box
③background-clip
值:padding-box、content-box、border-box(默认)
二、HSLA:
新增颜色属性;
H:色调
S:饱和度
L:亮度
A:透明度
三、新增渐变颜色:
radial-gradient:(*position(deg),color percentage,color percentage);径向渐变
linear-gradient:(*position,color percentage,color percentage);线性渐变
四、新增倒影:
-webkit-box-reflect:(direction,offset,color(可线性),url)
五、MASKS遮罩、蒙版:
-webkit-mask:(url,repeat,position,size)
六、自定义字体:
@font-face{
font-family:'iconfont';定义字体名
src:url(‘iconfont.tff’);加载字体
}
七、多行文本省略号:(共四行css)
-webkit-box-orient:vertical =>文本垂直显示
-webkit-line-clamp:3 =>显示 3 行文本
display:webkit-box =>弹性盒模型
overflow:hidden =>溢出隐藏
八、文本阴影:(可复合使用)
text-shadow:offsetX,offsetY,模糊距离,颜色
以上内容不完整,有些标点用的中文半角,以后还会修订补充。
【简抄】h5 新增的几个背景属性和文本属性的更多相关文章
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- H5新增form控件和表单属性
第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结 第一个知识点: 我们常见的表单验证有哪些呢 text 文本框标签 password 密码框 checkbox 多选框 r ...
随机推荐
- 用nexus搭建自己的maven私有仓库
用nexus搭建自己的maven私有仓库 刚安装nexus时,nexus启动失败,启动不到1分钟,自动停止.后来查找到了原因: Java 6 Support EOLOracle's support ...
- AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现、倾听和感觉
ylbtech-AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现.倾听和感觉 1.返回顶部 1. 案例分析:美光使用数据和人工智能来发现.倾听和感觉 内存芯片制造商 ...
- 【Jmeter】Jmeter聚合报告分析
Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 #Samples:表示你这次测试中一共发出了多少个请求 ...
- appium+python 快速给真机安装app
#coding=utf-8from appium import webdriverfrom time import sleepimport os,time,unittest '''给手机快速装app的 ...
- QTableWidget笔记
1.QTableWidget继承自QTableView. 2.头文件:QTableWidget 3.简单使用: #include "mainwindow.h" #include & ...
- django根据不同app配置相应的log文件
django根据不同app配置相应的log文件 settings.py # django logging LOG_PATH = "/var/log/blog/" LOGGING = ...
- strlen细节以及sizeof细节
strlen细节以及sizeof细节前者会忽略结束符号,后者不会忽略结束符
- HeapCreate
为进程创建新堆,请求分配虚拟内存分页,函数原型如下: HANDLE HeapCreate( DWORD flOptions, SIZE_T dwInitialSize, SIZE_T dwMaximu ...
- SQL 分组获取产品 前两条记录
select * from ( select *, ROW_NUMBER() over(partition by IPAddress order by recordtime desc) as rowN ...
- CentOS 安装Perl环境
参考博文:https://blog.csdn.net/weixin_40192129/article/details/78610974 vmware tools需要perl环境的支持 安装perl支持 ...