CSS3属性
文本阴影属性
• text-shadow
• 说明:水平、垂直阴影的位置允许负值
可进行多阴影设置(逗号分隔的方式)
文本换行
• Word-wrap
属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性值:
normal
说明:只在允许的断字点换行(浏览器保持默认处理)
break-word
说明:属性允许长单词或 URL 地址换行到下一行
• Word-break
属性值:
break-all
说明:它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句
Keep-all
说明:文本不会换行,只能在半角空格或连字符处换行
@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用
@font-face的语法规则:
@font-face {
font-family: ;
src: [][, []]*;
[font-weight: ];
[font-style:
背景属性
Background-origin 背景原点
说明:指定background-origin属性应该是相对位置
属性值
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框 默认值
Background-clip 背景裁切
说明:background-clip 属性规定背景的绘制区域。
属性值
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。 默认值
Background-size 背景尺寸
说明:background-size 规定背景图像的尺寸
属性值
length (10px)
规定背景图的大小。第一个值宽度,第二个值高度。
Percentage(%)
以百分比为值设置背景图大小
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
contain
把图像图像扩展至最大尺寸,以使其宽度或高度完全适应内容区域。
css3多背景图的设置
eg:background:url(),url()
颜色模式
1、rgba 颜色模式
2、 Hsl 颜色模式(了解)
3、 Hsla 颜色模式(了解)
就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值图片边框
图片边框
border-image 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框图像区域超出边框的量(值是一个倍数)
CSS圆角
Border-radius
• border-radius: 5px 10px 20px 50px
• border-radius: 2em/1em
• border-radius:10px 20px 30px 40px/40px 30px 20px 10px