CSS實現圓角邊框的完美解決方案
阿新 • • 發佈：2019-09-20
css實現圖片圓角，相容所有瀏覽器：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style type=
"text/css"
>
/*通用樣式--容器寬度值*/
.sharp{
width
:
907px
;
height
:
606px
;
margin-top
:
20px
;
float:
left
;
margin-left
:
10px
;
display
:
inline
;}
.sharp .content div{
padding
:
10px
;
text-indent
:
2em
;}
.content{height
:
598px
;}
/*這個高度值等於圖片的高度值-8px*/
/*圓角框通用設定樣式，如果要運用多個不同顏色，以下部分不用重新變化--------------*/
.b
1
,.b
2
,.b
3
,.b
4
,.b
5
,.b
6
,.b
7
,.b
8
{
height
:
1px
;
font-size
:
1px
;
overflow
:
hidden
;
display
:
block
;}
.b
1
,.b
8
{
margin
:
0
5px
;}
.b
2
,.b
7
{
margin
:
0
3px
;
border-right
:
2px
solid
;
border-left
:
2px
solid
;}
.b
3
,.b
6
{
margin
:
0
2px
;
border-right
:
1px
solid
;
border-left
:
1px
solid
;}
.b
4
,.b
5
{
margin
:
0
1px
;
border-right
:
1px
solid
;
border-left
:
1px
solid
;
height
:
2px
;}
.content {
border-right
:
1px
solid
;
border-left
:
1px
solid
;
overflow
:
hidden
;}
/*圖片偏移定位--上面部分*/
.sharp b.b
2
{
background-position
:
-4px
top
;}
.sharp b.b
3
{
background-position
:
-2px
-1px
;}
.sharp b.b
4
{
background-position
:
-1px
-2px
;}
/*圖片偏移定位--下面部分*/
.sharp b.b
7
{
background-position
:
-4px
bottom
;}
.sharp b.b
6
{
background-position
:
-2px
bottom
;}
.sharp b.b
5
{
background-position
:
-1px
bottom
;}
/*顏色方案一----------------------------------------*/
/*邊框色*/
.color
1
.b
2
,.color
1
.b
3
,.color
1
.b
4
,.color
1
.b
5
,.color
1
.b
6
,.color
1
.b
7
,.color
1
.content{
border-color
:
#dce4f5
;}
.color
1
.b
1
,.color
1
.b
8
{
background
:
#dce4f5
}
/*圖片路徑*/
.color
1
.b
2
,.color
1
.b
3
,.color
1
.b
4
,.color
1
h
3
,.color
1
.b
5
,.color
1
.b
6
,.color
1
.b
7
,.color
1
.content{
background
:
url
(http://www.hello-
code
.com/usr/uploads/
2012
/
10
/
4085139866
.png)
no-repeat
;}
.color
1
.content{
background-position
:
left
-4px
;}
</style>
|
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>