纯CSS生成抗锯齿圆角的代码 - 快车库

纯CSS生成抗锯齿圆角的代码

263 查看

<meta content="text/html; charset=utf-8" http-equiv="content-type"/> 
    <meta content="Smiling Dolphin" name="author"/> 
    <meta content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" name="keywords"/> 
    <meta content="my favorites language." name="description"/> 
    <meta content="all" name="robots"/> 
    <title>抗锯齿圆角</title> 
<style type="text/css"> 
.antialias-roundedcorners{width:650px;height:76px;padding:5px;background-color:#3847B4;} 
.spiffy{display:block} 
.spiffy *{ 
  display:block; 
  height:1px; 
  overflow:hidden; 
  font-size:.01em; 
  background:#F1FFDD} 
.spiffy1{ 
  margin-left:3px; 
  margin-right:3px; 
  padding-left:1px; 
  padding-right:1px; 
  border-left:1px solid #8796c5; 
  border-right:1px solid #8796c5; 
  background:#c2d1d2} 
.spiffy2{ 
  margin-left:1px; 
  margin-right:1px; 
  padding-right:1px; 
  padding-left:1px; 
  border-left:1px solid #4a59b8; 
  border-right:1px solid #4a59b8; 
  background:#cddcd5} 
.spiffy3{ 
  margin-left:1px; 
  margin-right:1px; 
  border-left:1px solid #cddcd5; 
  border-right:1px solid #cddcd5;} 
.spiffy4{ 
  border-left:1px solid #8796c5; 
  border-right:1px solid #8796c5} 
.spiffy5{ 
  border-left:1px solid #c2d1d2; 
  border-right:1px solid #c2d1d2} 
.spiffyfg{ 
  background:#F1FFDD; 
  padding:3px;} 
</style> 
 
 
<div class="antialias-roundedcorners"> 
  <b class="spiffy"> 
  <b class="spiffy1"><b></b></b> 
  <b class="spiffy2"><b></b></b> 
  <b class="spiffy3"></b> 
  <b class="spiffy4"></b> 
  <b class="spiffy5"></b></b> 
  <div class="spiffyfg"> 
     
    This is content 
here
 
    http://www.spiffycorners.com/index.php?sc=spiffy&bg=3847B4&fg=D68A88&sz=3px 
  </div> 
  <b class="spiffy"> 
  <b class="spiffy5"></b> 
  <b class="spiffy4"></b> 
  <b class="spiffy3"></b> 
  <b class="spiffy2"><b></b></b> 
  <b class="spiffy1"><b></b></b></b> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最近更新的内容

CSS Gradient详解
JS核心系列：浅谈 call apply 与 bind
JS核心系列：浅谈原型对象和原型链
利用bootstrap的modal组件自定义alert，confirm和modal对话框
前端工程师是怎样一种职业
详解Javascript中的Object对象
JavaScript 开发最佳实践
谈笑风生组件化
彻底理解js中this的指向
javascript 作用域和 this 关键字

你可能感兴趣的文章

6本值得一读的JavaScript英文电子书
在JavaScript中一切都是对象吗？
使用 SVG 输出 Octicon
如何压缩 HTTP 请求正文
谈谈 HTTP/2 的协议协商机制
console对象–详解
HTTP 412 错误 – 先决条件失败 (Precondition failed)
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍
CSS vs JS动画：谁更快？
Web开发者色彩搭配快速指南

2025 - 快车库 - 我的知识库重庆启连科技有限公司渝ICP备16002641号-10
企客连连表单助手企服开发榜单123

渝公网安备 50010702501581号