纯css实现文字链接圆角图层显示效果

3周前 (04-29 19:17)阅读13回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4714
  • 级别管理员
  • 主题942
  • 回复2
楼主

纯css实现文字链接圆角显示效果,可让li列表或div层有圆角特效,需要制作圆角特效的朋友可以来参考下这个例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>纯css实现文字链接圆角图层显示效果_武鸣人</title> 
<style type="text/css">
body { padding:20px; font-family:arial; text-align:left; } p, li { font-size: 12px; line-height:18px; } h3 { margin-bottom:6px; } 
.examplesGoHere { text-align:left; margin:50px 50px 50px 50px; } 
.letsGiveItAFixedWidthOf200Pixels { width:200px; } ul { list-style:none; margin-left:0; padding-left:0; margin-top:0; } ul li { margin-bottom:8px; margin-left:0; padding-left:0; }
.notchedListItems a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; }
 .notchedListItems a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } .notchedListItems a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; } 
 .notchedListItems a:hover, .notchedListItems a:hover b { background:#666; color:white; }
 .feature { border:solid #647aae; border-width:0 1px; background:#b0c0e6; } 
 .feature div { position:relative; top: -1px; left: 0; border:solid #647aae; border-width:1px 0 0; } .feature div div { top: 2px; border-width:0 0 1px; padding: 0px 6px; } 
</style> 
</head> 
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels"> 
   <h3>A list列表</h3> 
   <ul class="notchedListItems"> 
     <li><a href="https://www.wuming.ren"><b><b>武鸣人一号文字链接</b></b></a></li> 
     <li><a href="https://www.wuming.ren"><b><b>武鸣人二号文字链接</b></b></a></li> 
     <li><a href="https://www.wuming.ren"><b><b>武鸣人三号文字链接</b></b></a></li> 
   </ul> 
   <h3>A div层</h3> 
   <div class="feature"> 
     <div> 
       <div> 
         <p>武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢!</p> 
         <p>武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢!</p> 
         <p>武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢!</p> 
       </div> 
     </div>
   </div> 
   <ul class="notchedListItems"> 
       <li>
       <a href="https://www.wuming.ren"><b>纯css设计</b></a>
       </li> 
   </ul> 
</div>
</body> 
</html>


0
0
收藏0
回帖

纯css实现文字链接圆角图层显示效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息