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>


明天补充

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值