CSS3中支持使用border-radius设置边框的圆角.
#myDIV{
border: 1px solid #AAAAAA;
width: 200px;
height: 80px;
/*
* border-radius属性设置一个代表四个角的x,y都是该值
* 两个代表 第一个代表左上和右下,第二右上和左下
* 三个值代表 第一个左上 第二个代表两个角右上和左下 第三个则是右下
* 四个代表四个角从左上顺时针
*/
border-radius: 40px 40px 40px 40px/40px 40px 40px 40px; /*前四个是分别是左上,右上,右下,左下的x,后四个是这几个的y*/
}
设置边框图片
border-image 可以设置边框图片,有几个属性source为图片路径,slice如何裁剪默认以像素裁切,width定义边框图片显示的大小,repeat定义边框重复性:rounded平铺,stretched拉伸,repeated平铺.
边框的设置其实就是将图片按照九宫格的方式以设置的宽度裁剪,然后将对应位置的图片填充过去,然后按照repeat的设置图片的排列方式完成设置.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
border: 15px solid #A52A2A;
width: 300px;
height: 100px;
text-align: center;
}
#round{
border-image: url(../实战/timg.jpeg) 30 round;
}
#stretch{
border-image: url(../css定位与div布局/images/4.jpg) 30 stretch;
}
</style>
</head>
<body>
<div id="round">round</div>
<div id="stretch">stretch</div>
</body>
</html>
设置阴影
在CSS3中使用box-shadow给元素设置阴影
它主要有以下几个属性
- h-shadow 水平方向上的阴影位置,可以为负值
- v-shadow 垂直方向上阴影的位置,可以为负值
- blur 可选值 模糊距离
- spread 可选 阴影的大小
- color 可选 阴影的颜色
box-shadow: 10px 10px 5px 15px #aaaaaa
网友评论