CSS3基础


1、CSS3边框

border-radius:用于创建圆角
border-image:使用图片创建圆角
box-shadow:用来添加阴影

2、border-radius属性

四个值:左上角、右上角、右下角、左下角
三个值:左上角、右上角和左下角、右下角
两个值:左上角和右下角、右上角和左下角
一个值:四个角相同

3、border-image属性

border-image-source:边框图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图片是否应该平铺、铺满或拉伸

4、box-shadow属性

h-shadow:必需,水平阴影的位置,允许负值
v-shadow:必需,垂直阴影的位置,允许负值
blur:可选,模糊距离
spread:可选。阴影的尺寸
color:可选,阴影的颜色
inset:可选,将外部阴影(outset)改为内部阴影

5、CSS3背景

background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域

6、background-size属性

length:设置背景图片的高度和宽度,第一个值设置宽度,第二个值设置高度。如果只给一个值,第二个值设为auto(自动)
percentage:将计算相对于背景定位区域的百分比,第一个值设为宽度,第二个设为高度。如果只给一个值,第二个值设为auto(自动)
cover:此时会保持图像的纵横比并将图像缩放成完全覆盖背景定位区域的最小大小
contain:此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最小大小

7、background-origin、clip属性

padding-box:background-origin:背景图片相对于内边距框来定位;background-clip:背景被裁到内边距框
border-box:background-origin:背景图片相对于边框盒来定位;background-clip:背景被裁到边框盒
content-box:background-origin:背景图片相对于内容框来定位;background-clip:背景被裁到内容框

8、CSS3文本效果

text-shadow:向文本添加阴影
word-wrap:允许长单词换行
text-overflow:当文本溢出包含元素时发生的事情
text-shadow属性
h-shadow:必需,水平阴影的位置,允许负值
v-shadow:必需,垂直阴影的位置,允许负值
blur:可选,模糊距离
color:可选,阴影的颜色

1
<p style="text-shadow: 5px 5px 5px red">text-shadow属性实例</p>

9、word-wrap属性

normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行

10、text-overflow属性

三个属性配合使用
超出部分显示省略号
white-space:Nowrap 文本不会换行,在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis 用省略号来代替被裁减的文本

11、CSS3字体

@font-face{
里面的内容
}
P{
font-family:上边自定义的字体名称
}//P或者其他需要更换字体的标签

@font-face{
font-family:必需,规定字体的名称
src:必需,定义字体文件的URL
font-weight:可选,定义字体的粗细,默认normal
font-style:可选。定义字体的样式,默认normal
}


文章作者: COOL
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 COOL !
评论
  目录