0

0

CSS3学习笔记_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:36:49

|

1288人浏览过

|

来源于php中文网

原创

用的时候首先记得加前缀:-webkit-,-moz-,-o-,-ms-,因为目前各个浏览器对css3和html5的兼容性还是参差不齐。

边框:
1.border-radius(实心圆的实现)
2.box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](用逗号可叠加效果)
3.border-image:url(border.png) 70 70 70 70 round /repeat/stretch(由外到内切片的偏移量,分别为上右下左)

颜色:
1.rgba(多了一个透明度)
2.颜色渐变:linear/radial gradient(to left,#fff,blue,red)

文字和字体:
1.text-overflow:clip(剪切) | ellipsis(显示省略)/*要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果*/
2.word-wrap:normal(控制连续文本换行) | break-word(内容在边界内换行)
3.@font-face{  font-family:字体名称;src:字体文件在服务器的路径;}
4.text-shadow:x-offset y-offset blur color;

背景:
1.background-origin: border-box | padding-box | content-box;/*设置元素背景图片的原始起始位置,如果背景不是no-repeat,这个属性无效*/
2.background-clip: border-box | padding-box | content-box | no-clip;
3.background-size: auto | | | cover(填满整个容器) | contain(某一边紧贴容器边缘)/*设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。*/
4.多背景图

选择器:
1.新增属性选择器a[href^=val](开头) | a[href$=val](结尾) | a[href*=val](包含)
2./:root/:not/:empty/:target(用来匹配指向链接的样式)
3.first-child(匹配第一个子元素)/last-child/nth-child(数字)/nth-last-child/(类型)first-of-type/nth-of-type(2n)/:only-child(来控制仅有一个子元素的样式)/only-of-type
4.:enabled/:checked/::selection选择器(鼠标选择时)/:read-only/:read-write/::before和::after(用来给清除浮动,添加阴影等)

变形:
1.rotate(..deg)(旋转)
2.skew(x y)(扭曲)
3.scale(x,y)(缩放)
4.translate(x,y)(位移,可以应用在居中上)
5.matrix()(矩阵,用于2d变换)
6.transition-duration(过渡所需时间)
7.transition-timing-function(linear/ease-in-out/ease-out/ease-in)(随着时间而过渡的快慢)
8.transition-delay(用来指定当改变元素属性值后多长时间开始执行)

动画:
1.keyframes(类似于flash中的关键帧)(格式:百分比{样式})
2.animation-name(调用keyframes定义好的动画)
3.animation-duration(用来设置css3动画播放时间)
4.animation-timing-function(主要用来设置动画播放方式)
5.animation-delay
6.animation-iteration-count(infinite | )
7.animation-direction(normal、alternate)
8.animation-play-state(running和paused)
9.animation-fill-mode(none、forwards、backwords和both)定义在动画开始之前和结束之后发生的操作

布局:
1.columns:列宽 || 列数 / columns-width(auto/列宽) / column-count(auto/列数)
2.column-gap(列间距)
3.column-rule:||(列表边框)
4.column-span(跨列设置)
5.弹性盒子模型
6.伸缩布局

ChatGPT Website Builder
ChatGPT Website Builder

ChatGPT网站生成器,AI对话快速生成网站

下载

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5万人学习

第二十四期_综合实战
第二十四期_综合实战

共133课时 | 6.9万人学习

第二十四期_前端开发
第二十四期_前端开发

共161课时 | 4.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号