一、背景图像显示:

①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 新增的几个背景属性和文本属性的更多相关文章

  1. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  2. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  3. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  4. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  5. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  6. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  7. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  8. H5新增属性classList

    H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...

  9. H5新增form控件和表单属性

    第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结 第一个知识点: 我们常见的表单验证有哪些呢 text 文本框标签 password 密码框 checkbox 多选框 r ...

随机推荐

  1. 用nexus搭建自己的maven私有仓库

    用nexus搭建自己的maven私有仓库  刚安装nexus时,nexus启动失败,启动不到1分钟,自动停止.后来查找到了原因: Java 6 Support EOLOracle's support ...

  2. AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现、倾听和感觉

    ylbtech-AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现.倾听和感觉 1.返回顶部 1. 案例分析:美光使用数据和人工智能来发现.倾听和感觉 内存芯片制造商 ...

  3. 【Jmeter】Jmeter聚合报告分析

    Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 #Samples:表示你这次测试中一共发出了多少个请求 ...

  4. appium+python 快速给真机安装app

    #coding=utf-8from appium import webdriverfrom time import sleepimport os,time,unittest '''给手机快速装app的 ...

  5. QTableWidget笔记

    1.QTableWidget继承自QTableView. 2.头文件:QTableWidget 3.简单使用: #include "mainwindow.h" #include & ...

  6. django根据不同app配置相应的log文件

    django根据不同app配置相应的log文件 settings.py # django logging LOG_PATH = "/var/log/blog/" LOGGING = ...

  7. strlen细节以及sizeof细节

    strlen细节以及sizeof细节前者会忽略结束符号,后者不会忽略结束符

  8. HeapCreate

    为进程创建新堆,请求分配虚拟内存分页,函数原型如下: HANDLE HeapCreate( DWORD flOptions, SIZE_T dwInitialSize, SIZE_T dwMaximu ...

  9. SQL 分组获取产品 前两条记录

    select * from ( select *, ROW_NUMBER() over(partition by IPAddress order by recordtime desc) as rowN ...

  10. CentOS 安装Perl环境

    参考博文:https://blog.csdn.net/weixin_40192129/article/details/78610974 vmware tools需要perl环境的支持 安装perl支持 ...