css3新手入门

原创 2018年04月17日 21:47:47

一, 简介

1,css3模块: 

(1)选择器

(2)框模型

(3)背景和边框

(4)文本效果

(5)2D和3D转换

(6)动画

(7)多列布局

(8)用户界面

 

二, 边框

border-radius

box-shadow

border-image

目标:创建圆角边框,向矩形添加阴影,使用图片来绘制边框

 

1,圆角边框

例:

<style>

   div{

       width:300px;

       height:50px;

       text-align:center;

       border:5px sloid yellow;

       background:violet;

       border-radius:25px/*圆角属性*/

   }

   </style>

<body>

   <div>border-radius添加圆角</div>

</body>

 

2,向矩形添加阴影

<style>

   div{

       width:200px;

       height:50px;

       background-color:yellow;

       box-shadow:10px20px5px#ccc;/*方框添加阴影*/

   }

</style>

<div>box-shadow方框添加阴影</div>

 

3,图片绘制边框

 

三, 背景

background-size      背景图片的尺寸

background-origin    规定背景图片的定位区域。

了解:

background-clip      规定背景的绘制区域。

 

四,文本效果

text-shadow          可向文本应用阴影

word-wrap            文本强制文本进行换行 - 即使这意味着会对单词进行拆分

了解:

Hanging-punctuation  规定标点字符是否位于线框之外

Punctuation-trim

Text-align-last

Text-emphasis

Text-justify

Text-outline

Text-overflow

Text-shadow

Text-wrap

Word-break

Word-wrap

 

五,字体

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

    url('Sansation_Light.eot'); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

}

</style>


明天补充

linux新手入门第一季

-
  • 1970年01月01日 08:00

CSS3基础入门学习: 背景制作实例!

CSS3 背景CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。在本章,您将学到以下背景属性:background-sizebackground-origin您也将学到如何使用多重背景图片...
  • yeana1
  • yeana1
  • 2016-07-28 15:26:20
  • 407

matlab新手入门篇

Matlab矩阵操作基础 本文参考了matlab网上视频教程和部分百度搜索和百度百科资料 视频地址:http://cn.mathworks.com/videos/matlab-for-new-us...
  • u010603342
  • u010603342
  • 2015-03-02 17:30:58
  • 554

ESP8266新手入门调试指导

  • 2016年12月19日 10:39
  • 657KB
  • 下载

Linux常用命令大全(新手入门)

系统信息  arch 显示机器的处理器架构(1)  uname -m 显示机器的处理器架构(2)  uname -r 显示正在使用的内核版本  dmidecode -q 显示硬件系统部件 - (SMB...
  • CSDN_Terence
  • CSDN_Terence
  • 2017-09-13 21:26:08
  • 951

Unity3D 初级课程之新手入门总结

Unity API KeyCode[键码] 值 A~Z F1~F12 Space[空间] 值 Self World GameObject[游戏物体] 方法 GetComponen...
  • qq_28811731
  • qq_28811731
  • 2017-03-05 16:22:06
  • 394

python新手入门(六)

python学习笔记(类与对象)
  • YYtomorrow
  • YYtomorrow
  • 2017-07-12 13:45:48
  • 291

Jenkins基础入门-1-Jenkins简单介绍和环境安装

如果在做自动化测试的朋友,应该熟悉Jenkins,或者至少使用过。如果一个人没有使用过Jenkins或者hudson,hudson是Jenkins的前身,他还说自己做过自动化测试,只能说,他只不过是在...
  • u011541946
  • u011541946
  • 2017-09-16 16:16:28
  • 1460

python 新手入门+概括

Python新手必读(中国开源项目) 第一章    开始 为什么要选择python? 一个高层的总结 把python描述成一种面向对象的脚本语言可能是最合适的。它的设计混合了传统语言的软件...
  • zhangfn2011
  • zhangfn2011
  • 2012-09-28 16:14:16
  • 3082

protege新手入门

  • 2010年01月19日 16:16
  • 2.78MB
  • 下载
收藏助手
不良信息举报
您举报文章:css3新手入门
举报原因:
原因补充:

(最多只允许输入30个字)