CSS3网页开发（简述）前端入门

CSS3网页开发

1.CSS3概述

2.边框

3.背景

4.文本

5.多列

6.转换

---

CSS3网页开发

1.CSS3概述

1）CSS3的新增特性

2）强大的选择器

3）半透明效果的实现

4）多栏布局

5）多背景图

6）块阴影和文字阴影

7）圆角

8）边框图片

9）形变效果

10）媒体查询

11）CSS3的线性渐变

 

2.边框

1）圆角边框 border-radius

基本语法：

border:radius:none | <length>{1,4} [/ <length>{1,4} ];

语法说明：

border-radius的属性参数包含两个值。none：默认值，表示元素没有圆角。<length>：由浮点数字和单位标识符组成的长度值，不可以是负值。border-radius是一种缩写方法。4个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的。

.border-radius：<length>{1}设置一个值，元素四个圆角效果一样。

.border-radius：<length>{2}设置两个值，top-left等于bottom-right，取第一个值。元素左上角和右下角取第一个值。

.border-radius：<length>{3}设置三个值，第一个值设置top-left，第二个值设置top-right，第三个值设置top-right

.border-radius：<length>{4}设置四个值。

 

2）边框图片border-image

border-image属性
border-image-source	指定是否用图片定义边框样式或图片来源地址
border-image-slice	指定图片边框向内偏移
border-image-width	指定图片边框的宽度
border-image-outset	指定边框图片区域超出边框的量
border-image-repeat	用于指定边框是否平铺、铺满或拉伸

 

3）边框阴影box-shadow

基本语法：

box-shadow：h-shadow v-shadow blur spread color  inset；

语法说明：

box-shadow可以向边框添加一个或多个阴影。每个阴影有2~4个长度值、可选的颜色值以及可选的inset关键字来规定。

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

 

3.背景

1）背景图片尺寸background-size

基本语法：

background-size：length | percentage| over |contain;

语法说明：

length：用长度值指定背景图片的大小

percentage：有百分比指定背景图片大小

cover：将背景图片等比缩放到完全覆盖容器，背景图片有可能超出容器

contain：将背景图片等比缩放到宽度或高度相等，背景图片始终被包含在容器内

 

2）背景图片定位区域background-origin

基本语法：

background-origin：padding-box|border-box|content-box;

语法说明：

padding-box:背景图片相对于边距框来定位

border-box：背景图片相对于边距盒来定位

content-box：背景图片相对于内容框来定位

 

3）背景绘制区域background-clip

基本语法：

<link type=”text/css” rel=”stylesheet” href=”外部样式表的文件名称”>

background-clip:border-box |padding-box|content-box;

语法说明：

border-box：背景被裁剪到边框盒

padding-box：背景被裁剪到边距盒

content-box：背景被裁剪到内容框

 

4.文本

1）文本阴影text-shadow

基本语法：

text-shadow: h-shadow v-shadow blur color;

 

2）强制换行word-wrap：允许长单词或URL地址换行到下一行

基本语法：

word-wrap： normal | break-word;

语法说明:

normal:只在允许断字点换行（浏览器保持默认处理 ）

break-word：在长单词或URL地址内部进行换行

 

3）文本溢出text-overflow

基本语法：

text-overflow：clip| ellipsis

语法说明：

clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。

ellipsis：当对象内文本溢出时显示省略标记（...）

 

5.多列

1）创建多列column-count

基本语法：

column-count：number | auto

语法说明：

number：元素内容将被划分的最佳列数

auto：由其他属性决定列数，如column-width

2）列的宽度column-width

基本语法：

column-width：length | auto

语法说明:

length：用长度来定义列宽

auto：根据column-count自动分配宽度。默认值。

 

6.转换

1）移动translate（）

.translate（x,y）。水平方向和垂直方向同时移动

.translateX(x)。仅水平方向移动

.translateY(y)。仅垂直方向移动

 

2）旋转rotate（）

  rotate（）方法通过制定的角度参数对原元素制定一个2D的旋转，正数则顺时针。

基本语法：

rotate(30deg)

 

3）缩放scale（）

通过scale（）方法，元素的尺寸会根据给定的宽度（X轴）和高度（Y）参数增加或减少。

基本语法：

scale（2,3）

@欢迎大家指出问题，谢谢