CSS3 边框 圆角 背景

CSS3用于控制网页的样式布局.

CSS3是最新的CSS标准.

 

关于transform:

transform:rotate(10deg);//顺时针方向旋转10°

浏览器支持情况:低版本的IE浏览器不支持.

 

CSS3简介

对于CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2.

 

CSS3模块

CSS3倍拆分为"模块".旧规范已拆分成小块,还增加了新的.

一些最重要CSS3模块如下:

选择器, 盒模型, 背景和边框, 文字特效, 2D/3D转换, 动画, 多列布局, 用户界面.

 

CSS3建议

W3C的CSS3规范仍在开发.

但是,许多新的CSS3属性已在现代浏览器使用.

 

CSS3边框

使用CSS3, 你可以创建圆角边框, 添加阴影框, 并作为便捷的形象而不是用PS设计.

 

border-radius    box-shadow    border-image

 

CSS3圆角

border-radius:5px;

javascript语法: object.style.borderRadius = "5px"

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值: 四个圆角值相同

也可以创造椭圆的边角:border-radius: 50px/15px;

 

border-radius	所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

 

 

 

 

 

 

CSS3阴影

box-shadow: 10px 10px 5px #888888;

 

CSS3边界图片

border-image:url(border.png) 30 30 round;

border-image属性是一个简写属性,用于设置以下属性:

border-image-source:用在边框的图片的路径.

border-image-slice:图片边框向内偏移.

border-image-width:图片边框的宽度.

border-image-repeat:图像边框是否平铺repeat, 铺满round, 拉伸stretch.

.image{border:15px solid transparent;border-image:url(border.png) 30 30 round;}

 

CSS3 background-image:属性

CSS3中可以通过background-image属性添加背景图片.

不同的背景图片用逗号隔开,所有的图像中显示在最顶端的为第一张.

.bgimage{

    background-image:url(hua.png),url(bg.png);    

    background-position:center center,left top;    

    background-repeat:no-repeat,no-repeat;

}

 

CSS3 background-size属性

background-size指定背景图像的大小. CSS3以前,背景图像大小由图像实际大小决定.

CSS3中可以指定背景图片,让我们重新再不同的环境中指定背景图片的大小.您可以指定像素或百分比大小.

你指定的大小是相对于父级元素的宽度和高度的比分比大小.

.bgimgsize{

    background:url(img_flwr.gif);

    background-size:80px 60px;

    background-repeat:no-repeat;

}

 

CSS3的background-origin属性

background-origin属性指定了背景图像的位置区域.

content-box, padding-box, border-box区域内可以放置背景图像.

padding-box:背景图像相对于内边距框来定位.

border-box:背景图像相对于边框盒来定位.

content-box:背景图像相对于内容框来定位.

注意:background-origin属性规定background-position属性对于什么位置来定位.

如果背景图像的background-opsition属性是fixed,则该属性没有效果.

 

CSS3的background-clip属性

CSS3中background-clip背景裁剪属性是从指定位置开始绘制.