css样式中边框属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天我们学习边框的各种样式属性：

一、边框倒角

边框圆角:

border-radius : 按照顺时针的方向设置四个角的倒角

border-radius : 3px;

单角设定:

border-top-left-radius : 左上角

border-top-right-radius : 右上角

border-bottom-left-radius:左下角

border-bottom-right-radius:又下角

现在我想在网页中显示一个圆：

<!DOCTYPE html>
<html>
<head>
<title> 边框 </title>
<meta charset="utf-8" />
<style>
/*修改 class为d1的元素的边框*/
div.d1{
width:200px;
height:200px;
border:5px solid black;
/*border-radius:10px 20px 30px 40px;*/ /*四个角*/
border-radius:100px;
}
</style>
</head>
<hr />
<div class="d1"></div>
<body>
</body>
</html>其页面效果为：
二.边框阴影：属性： box-shadow： h-shadow：必须，水平阴影距离 v-shandow：必须，垂直阴影距离 blur：可选，模糊距离 spred：可选，阴影尺寸 color：可选，阴影颜色 inset：可选，将外部阴影改为内部阴影 border-shandow：h-shandow v-shadow blur spread color inset： demo：box-shadow：5px（向右） 5px（向下） 5px 10px red； demo：box-shadow：-5px（向左） -5px（向上） -5px -10px red；例如：
<!!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
#d1{
border:1px solid red;
width:100px;
height:100px;
box-shadow:-5px -5px 5px 5px red;
}
</style>
</head>
<body>
<div id="d1">this is a div 是吗</div>
</body>
</html>
三.图片边框属性： border-image属性：将图片规定为包围div元素的边框 border-image-source：图片的路径 border-image-width：图片边框的宽度 border-image-repeat：图片呢边框是否应pingpu（repeat）、铺满（round）或拉伸（stretch）例如,我现在想让一张图片平铺在边框的四周：
<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
#d1{
border:20px solid red;
width:300px;
height:300px;
}
#d1{
border-image:url(p_small_005.jpg) 20 repeat;
}
</style>
</head>
<body>
<div id="d1">this is a div 是吗</div>
</body>
</html>