运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<title>另一CSS圆角框的实现方法</title>
5
<style>
6
.rndbox {
7
    background: #C6D9EA;
8
    width: 300px;
9
    font: 11px Verdana, Arial, Helvetica, sans-serif;
10
    color: #000033;
11
}
12
.rndtop {
13
    background: url(//ku.shouce.ren/files/images/201601/56a335ce62a62.gif) no-repeat right top;
14
}
15
.rndbottom {
16
    background: url(//ku.shouce.ren/files/images/201601/56a335cf468db.gif) no-repeat right top;
17
}
18
.rndbox p {
19
    margin: 0 8px;
20
}
21
</style>
22
</head>
23
<body>
24
<div class="rndbox">
25
    <div class="rndtop"><img src="//ku.shouce.ren/files/images/201601/56a335cff28c0.gif" alt="" width="30" height="30" /></div>
26
    <p>God gives answers in 3 ways: He says yes and gives U what U want. He says no and gives U something better. He says wait and gives U the best. 上帝用三种方式作答:他点头给你想要的;他摇头给你更好的;他让你等,就给你最棒的。</p>
27
    <div class="rndbottom"><img src="//ku.shouce.ren/files/images/201601/56a335d0e01ae.gif" alt="" width="30" height="30" /></div>
28
</div>
29
</body>
30
</html>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
用图片修饰的圆角边框
分类
CSS3
描述
CSS使用图片实现边框圆角,用两张图片作为背景,两张作为修饰,形成大圆角的效果,圆角的大小请根据自己的需要修改,修改过程中要对应修改CSS的代码,仅供参考。
收藏