border-radius
- 定义：
border-radius属性是一个简写属性，用于设置四个border-*-radius 属性；该属性允许为元素添加圆角边框；
- 兼容性：
CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius
- 属性：
border-radius属性其实可以分为四个其他的属性：
border-radius-top-left //左上角
border-radius-top-right //右上角
border-radius-bottom-right //右下角
border-radius-bottom-left //左下角
//提示：按顺时针方式
- 写法：
border-radius: 1-4 length|% / 1-4 length|%;
//斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径
- 实例
- 实现一个圆形
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.circle{
width:200px;
height:200px;
border-radius:100px;
background:#dbf;
}
</style>
</head>
<body>
<div class = "circle"></div>
</body>
</html>
- 效果
- 实现一个椭圆
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.circle{
width:200px;
height:100px;
border-radius:50%;
background:#dbf;
}
</style>
</head>
<body>
<div class = "circle"></div>
</body>
</html>
- 效果
实现一个扇形
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.circle{
width:0px;
height:0px;
border-width:100px;
border-radius:100px;
border-color: #dbf transparent transparent transparent;
border-style:solid;
}
</style>
<body>
<div class = "circle"></div>
</body>
</html>
- 效果
border-image
- 语法
border-image: source slice width outset repeat|initial|inherit;
- 属性
border-image 属性是一个简写属性，用于设置以下属性：
- border-image-source:用在边框的图片的路径；
- border-image-slice:图片边框向内偏移；
- border-image-width:图片边框的宽度;
- border-image-outset:边框图像区域超出边框的量;
- border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched);
- 小栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p>
<p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 属性。</p>
</body>
</html>
- 效果
box-shadow
- 说明
box-shadow属性可以设置一个或多个下拉阴影的框。
- 语法
box-shadow: h-shadow v-shadow blur spread color inset;
- 属性
h-shadow:必需的。水平阴影的位置。允许负值;
v-shadow:必需的。垂直阴影的位置。允许负值;
blur:可选。模糊距离;
spread:可选。阴影的大小;
color：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表；
inset：可选。从外层的阴影（开始时）改变阴影内侧阴影；
- 小栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
</body>
</html>
- 效果
