Div圆角边框

最新推荐文章于 2023-03-24 10:16:19 发布

原创最新推荐文章于 2023-03-24 10:16:19 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #class #html

1.0 JavaScript 同时被 2 个专栏收录

61 篇文章

订阅专栏

1.2 JS页面效果(特效)分类

19 篇文章

订阅专栏

本文介绍了一种使用CSS实现特殊边角效果的方法。通过不同层级的u标签配合特定的样式属性，可以制作出独特的绿色边角装饰。这种技巧对于网页美化非常有用。

<html>
<head>
   <style type="text/css">
   u.corner u
   {
       height: 1px;
       font-size:1px;
       display: block;
       overflow: hidden;
       /*author: meizz*/
       text-decoration: none;
       background-color: green;
   }
   u.corner u.h1{margin: 0 5px;}
   u.corner u.h2{margin: 0 3px;}
   u.corner u.h3{margin: 0 2px;}
   u.corner u.h4{margin: 0 1px; height: 2px}
   </style>
<head>
<body>
   <div>
   <u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
     <div style="background-color: green; height: 200">content</div>
   <u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
   </div>
</body>