css3教程border

最新推荐文章于 2024-06-24 11:02:57 发布

boowen

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量667

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/boowen/article/details/16812659

版权

PHP 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#r{border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px;
}
#b{
width:300px;
height:100px;
background-color:#ff9900;
/*box-shadow:h-shadow v-shadow blur spred color inset;
h-shadow-------必需。水平阴影的位置，允许负值
v-shadow-------必需，垂直阴影的位置，允许负值
blur-----------可选，模糊距离
spread---------可选，阴影的尺寸
color----------可选，阴影的颜色
inset-----------可选，将外部阴影（outset)改为内部阴影
text-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色
*/
-moz-box-shadow:10px 10px 5px #888888;
box-shadow:10px 10px 5px #888888;
}
.box1 {
box-shadow: -5px 0 5px green, /*左边阴影*/
0 -5px 5px blue, /*顶部阴影*/
0 5px 5px red, /*底部阴影*/
5px 0 5px yellow; /*右边阴影*/

}

.box2 {
box-shadow: -5px 0 5px -5px green, /*左边阴影*/
0 -5px 5px -5px blue, /*顶部阴影*/
0 5px 5px -5px red, /*底部阴影*/
5px 0 5px -5px yellow; /*右边阴影*/
}
.i{
width:400px;
height:100px;
border-image:url(border.jpg) 30 30 round;
-webkit-border-image:url(border.jpg) 30 30 round;
/* Safari 5 */
-o-border-image:url(border.jpg) 30 30 round;
/* Opera */
}
</style>
</head>

<body>
<div id="r">
border-radius 属性允许你向元素添加圆角
</div>
<div id="b">
box-shadow 制作背影
</div>
<div class="box1">
box1<br />
<br />
<br />
</div>
<div class="box2">
box2<br />
<br />
<br />
</div>
<div class="i">

</div>
</body>
</html

boowen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3教程border

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档#r{border:2px solid #a1a1a1;padding:10px 40px;background:#d
复制链接

扫一扫