CSS3网页开发(简述)前端入门
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- 3ff7 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)
@欢迎大家指出问题,谢谢
- 写给IOS开发工程师的网页前端入门笔记
- 【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍
- CSS世界:web前端开发,CSS3+HTML5网页制作
- 好程序员Web前端开发入门之网页制作三要素
- web前端学习教程:HTML5、CSS3、3D魔方拼图在线益智小游戏网页开发
- 好程序员Web前端开发入门之网页制作三要素
- 深圳Web培训:Web前端开发入门之网页制作三要素
- Web前端开发入门之网页制作三要素
- 网页前端开发:微博CSS3适用细节初探
- 【网页前端学习之html】 学习笔记1-入门(开发工具)
- spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框
- 【网页基础】前端网页入门之了解网站的基本结构(一)
- 网页设计师和网页前端开发我该选择哪一个
- 【墙裂推荐】适合高中生看的HTML5网页开发实例入门书
- WEB前端开发快速入门教程
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
- web前端网页开发一般过程
- openresty 前端开发入门四之Redis篇
- 微信H5手机网页开发—快速入门