css3学习笔记之边框

CSS3新特性详解

最新推荐文章于 2025-05-07 11:15:37 发布

weixin_30325487

最新推荐文章于 2025-05-07 11:15:37 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aiyoubucuoo/p/5435051.html

CSS3 圆角

border-radius

<!DOCTYPE html>

< html >

< head >

< style >

#t1

{

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:300px;

border-radius:25px;

}

</ style >

</ head >

< body >

< div id = "t1" >border-radius 属性允许您为元素添加圆角边框！ </ div >

</ body >

</ html >

CSS3盒阴影

box-shadow

<!DOCTYPE html>

< html >

< head >

< style >

div

{

width:300px;

height:100px;

background-color:yellow;

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

}

</ style >

</ head >

< body >

< div ></ div >

</ body >

</ html >

CSS3边界图片

border-image

<!DOCTYPE html>

< html >

< head >

< style >

div

{

border:15px solid transparent;

width:250px;

padding:10px 20px;

}

#round

{

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

}

#stretch

{

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

}

</ style >

</ head >

< body >

< p > border-image 属性用于设置图片的边框。</ p >

< div id = "round" >这里，图像平铺（重复）来填充该区域。</ div >

< br >

< div id = "stretch" >这里，图像被拉伸以填充该区域。</ div >

< p >这是我们使用的图片素材：</ p >

< img src = "/images/border.png" />

</ body >

</ html >

新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

转载于:https://www.cnblogs.com/aiyoubucuoo/p/5435051.html