什css3新增的属性,CSS
1、文本阴影属性
text-shadow:10px 10px 10px red;
注:
第一个值 : 水平方向的距离 (必须有的:支持负值)
第二个值 : 垂直方向的距离 (必须有的:支持负值)
第三个值 : 阴影的模糊程度 (不支持负值)
第四个值 : 阴影的颜色
第一个值 和 第二个值得位置不能互换;
当给同一个文字设置多个阴影的时候,阴影和阴影之间用逗号隔开:
如:
text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
说明:水平、垂直阴影的位置允许负值
可进行多阴影设置(逗号分隔的方式)
2、盒子阴影属性
box-shadow 盒子阴影:
X-shadow 必需的。水平阴影的位置。允许负值
Y-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
box-shadow: 10px 10px 5px 10px #888888 inset;
当给一个盒子设置多个阴影的时候,阴影和阴影之间用逗号隔开:
box-shadow: 10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset;
3、文本换行
1)Word-wrap
属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性值:
normal (默认值)
说明:只在允许的断字点换行(浏览器保持默认处理)
break-word
说明:属性允许长单词或 URL 地址换行到下一行
2)Word-break
属性值:
break-all
说明:它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句
Keep-all
说明:文本不会换行,只能在半角空格或连字符处换行 (默认值)
4、@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在IE4就支持)
@font-face的语法规则:
@font-face {
font-family: ;
src: [][, []]*;
[font-weight: ];
[font-style:
}
iconfont字体图标库的使用 :https://www.iconfont.cn/ 阿里巴巴矢量图库
使用方法:
Unicode : 新引进iconfont.css 文件
在页面内添加个i标签
给i标签 添加 基类 (基本的类名) .iconfont
在把小图标对应的编码添加到i标签内即可
Font class:
新引进iconfont.css 文件
在页面内添加个i标签
给i标签 添加 基类 (基本的类名) .iconfont
在把小图标对应的class名字加到i标签内即可
Symbol:
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
在把小图标对应的#icon-XXX名字加到use标签内即可
5、颜色模式:
1、rgba 颜色模式 rgb()
2、 Hsl 颜色模式(了解)
3、 Hsla 颜色模式(了解) 带有透明度设置的
就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值360,饱和度和亮度有百分比表示0-100%之间。
color: Hsla(200,50%,50%,0.5)
color: Hsl(200,50%,50%)
a(透明度)的取值范围是0——1
Like
Like
Love
Haha
Wow
Sad
Angry
什css3新增的属性,CSS相关推荐
- css3新增的属性和用法
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀. 选择器 表单选择器 :focus 聚焦选择器 选择的是当下被聚焦的表单元素 input:focus {} :c ...
- css3新增动画属性(过度动画 变形动画 关键帧动画)
目录 过度动画transition 多属性值过渡 2d变形transform 平移 应用:实现居中(不要求知道盒子的宽高) 缩放 旋转 倾斜 修改变形中心的属性 变形属性的复合写法 3D变形动画 3d ...
- (17)css3新增背景属性
一.背景半透明 CSS3支持背景半透明的写法,颜色值增加了一种 rgba 模式. rgba 模式:在 rgb基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全 ...
- CSS3新增定位属性sticky,粘性定位
position:sticky sticky 英文字面意思是粘,粘贴. 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特 ...
- CSS3新增属性大全!
1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: -moz- Opera: -o- 1. ...
- html5中css新增的属性,css3有哪些新增属性?常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- 关于H5、CSS3新增的一些元素及属性
H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...
- css3有哪些新增属性,CSS3新增属性
本篇文章为大家介绍一些CSS3新增的属性,CSS3新属性的出现弥补了CSS2版本的不足,解决了很多我们设置元素样式时的痛点. 1.文本阴影属性 text-shadow:水平距离 垂直距离 模糊半径(模 ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
最新文章
- OpenGL 纹理学习总结
- java折半查找(正常的折半查找)
- SAP Hybris Commerce启用customer coupon的前提条件
- python 实现显著性检测_强!汽车车道视频检测:python+OpenCV为主实现
- java获取当前运行代码的类名、方法名、行号
- 集成学习(一)——随机森林以及GBDT
- 10个技巧帮你搞定IE 6
- 代码的马斯洛金字塔理论
- linux+sasl认证失败,memcached+SASL:更安全地访问memcached
- 腾讯要放弃 TIM 了?
- 最强Python编程神器,真香!
- iMX8模块Ubuntu移植
- Epson机器人原点与左右手矫正说明
- 1064 例题5-1-5 连续自然数求和
- 海思3516系列芯片SPI速率慢问题深入分析与优化(基于PL022 SPI 控制器)
- 通达信智能买卖指标公式
- Mac配置iterm2 + oh-my-zsh + ys配色方案,并解决环境变量失效问题
- 复杂动背景下的“低小慢”目标检测技术
- Unity-Slider调节音量大小功能
- vue中使用双循环v-for及点击切换active,默认使第n个添加active