CSS边框过滤

最新推荐文章于 2025-08-12 14:37:12 发布

bingdongguke1

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量132

点赞数

文章标签： javascript ViewUI

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>简单而惊人的CSS3边框过渡效果</title>

<style class="csscreations">body {

padding: 100px 20px;

}

a {

background-image: url(data:image/gif;base64,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);

background-position: 50% 50%;

background-repeat: no-repeat;

background-origin: border-box;

display: inline-block; width: 100px; height: 100px;

border-width: 50px;

border-color: rgba(0,0,0,0);

border-radius: 100%;

-moz-border-radius: 100%;

-webkit-border-radius: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: 0.5s ease;

-moz-transition: 0.5s ease;

-ms-transition: 0.5s ease;

-o-transition: 0.5s ease;

transition: 0.5s ease;

}

a:hover {

border-width: 0;

border-color: rgba(0, 0, 0, 0.5);

}

.one{border-style: solid;}

.two{border-style: dashed;}

.three{border-style: dotted;}

.yon {border: 50px solid rgba(0, 0, 0, 0.7);}

.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}

.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}

.ryk {border: 50px double rgba(0, 0, 0, 0.7);}

.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}

.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}

.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}

.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}

.x7, .x8, .x9 {

border-radius: 0;

-moz-border-radius: 0;

-webkit-border-radius: 0;

}

.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}

.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}

.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}

.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}

.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}

.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}</style></head>

<body>

<a href="#" class="one"></a>

<a href="#" class="two"></a>

<a href="#" class="three"></a>

<br />

<a href="#" class="yon"></a>

<a href="#" class="goo"></a>

<a href="#" class="rok"></a>

<a href="#" class="ryk"></a>

<br />

<a href="#" class="x7"></a>

<a href="#" class="x8"></a>

<a href="#" class="x9"></a></body>

</html><script></script>

<style>



.GoEdit{opacity: 0; position: fixed; top: -1px; right: -1px; padding: 5px 10px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51); text-shadow: rgb(255, 255, 255) 0px 1px 1px; border-top-right-radius: 5px; border: 1px solid rgb(153, 153, 153); text-decoration: none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue', Arial, Helvetica; -webkit-transition: opacity 100ms ease-out; background-position: initial initial; background-repeat: initial initial; }

</style>

<script type="text/javascript" src="/tools/jsbin/edit.js"></script>

<script type="text/javascript">

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2b9232a7b0ced15280772333a4ec7c3a' type='text/javascript'%3E%3C/script%3E"));

</script>