css3边框与框大小

css3边框与框大小

5.CSS3边框

(1)、CSS3圆角

在div中添加圆角元素

div{
border:2pxsolid;
border-radius:25px;
}

　　

(2)、CSS3盒阴影

在div中添加box-shadow属性

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

　　

(3)、CSS3边界图片

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像，在div中使用图片创建边框:

div{
border:30pxsolidblue;
border-image:url(border.png)，30，30，round;
-webkit-border-image:url(border.png)3030round;/*Safari5andolder
-o-border-image:url(border.png)3030round;/*Opera*/
}

 

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

6.CSS3框大小

(1)、CSS3 box-sizing属性

 

 

 

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

(3)、CSS3调整尺寸

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

Resize:vertical; 垂直 resize:horizontal; 水平 需要与overflow:auto;