css3新手入门

一, 简介

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>


明天补充

猜你喜欢

转载自blog.csdn.net/BuChengWenDeGe/article/details/79981429