CSS3 from W3C学习笔记

来源：互联网发布：淘宝宝贝过期不存在编辑：程序博客网时间：2024/06/06 08:55

一.CSS边框

1.圆角button的实现

<!DOCTYPE html><html><head><style> div{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;border-radius:25px;-moz-border-radius:25px; /* 老的 Firefox */}</style></head><body><div>border-radius 属性允许您向元素添加圆角。</div></body></html>

首先我们看div中的所有属性:

1)text-align声明文字的对齐方式-center为居中.

2)border声明一个宽带为2px,边框为实线,颜色为#a1a1a1的的边框.这是一种简写方式,默认按照border-width,border-style,border-color来排序.

3)padding声明内边距属性,声明的每个边距属性按照上右下左顺时针来进行声明.可以通过auto声明类似Android中的wrap_content,也可以声明具体像素值,也可以使用%来按百分比来声明或者使用inherit继承父类的padding属性.(特别的,padding不能为负值)

4)borderRadius声明了圆角边框的角度,可以同时指定4个角的角度也可以分别指定4个角的角度.

2.边框阴影box-shadow

div{box-shadow: 10px 10px 5px #888888;}

box-shadow用于为边框添加一个或多个阴影,语法格式为:box-shadow:h-shadow v-shadow blur spread inset.其中inset属性有inset和outset两个选择,可以控制是内部阴影还是外部阴影.

3.边框图片border-image

border-image是一个简写属性,用于设置以下属性:border-image-source用于边框的图片路径,border-image-slice图片边框的内偏移量,border-image-width图片边框的宽度,border-image-outset边框图像区域超出边框的量,border-image-repeat图像边框是否应平铺(repeated),铺满(rounded)或拉伸(stretched).

二.CSS3背景

1.background-size属性规定背景图片的尺寸:在CSS3之前,背景图片的尺寸由图片的实际尺寸决定.在CSS3中,可以规定背景图片的尺寸,这样就允许我们在不同环境里重复使用图片.可以使用像素或者百分比.如果以百分比规定尺寸,那么尺寸相对于父元素的高度和宽度.

2.background-origin属性规定图片的定位区域,背景图片可以放置于content-box,padding-box或者border-box区域.

3.多重背景,CSS3允许使用多个图片作为背景

4.background-clip规定图片绘制区域,border-box:背景被剪裁到边框盒,padding-box:背景被剪裁到内边距框,content-box:背景被剪裁到内容框.

三.CSS3文本效果

1.text-shadow可以向文本应用阴影,能够规定水平阴影,垂直阴影,模糊距离及阴影的颜色.

h1{text-shadow: 5px 5px 5px #FF0000;}

2.word-wrap可以设置允许文本进行强制换行,可能发生单词的拆分.

四.CSS3 2D转换

0 0