网站用户体验整合设计-CSS无图片无锯齿完美圆角边框

CSS无图片无锯齿完美圆角边框

Post by 张美工, 2009-6-25, Views:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS无图片无锯齿完美圆角边框</title>
<style type="text/css">
body{background-color:#000000;}
/* [display:block] 块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示；在这里是圆角正常显示的关键之一 */
.spiffy{display:block}
.spiffy *{display:block; height:1px; overflow:hidden; font-size:.01em; background:#FF0303;}
.spiffy1{margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px; border-left:1px
solid #6d0101; border-right:1px solid #6d0101; background:#bf0202;}
.spiffy2{margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #190000; border-right:1px solid #190000; background:#ce0202;}
.spiffy3{margin-left:1px; margin-right:1px; border-left:1px solid #ce0202; border-right:1px solid #ce0202;}
.spiffy4{border-left:1px solid #6d0101; border-right:1px solid #6d0101;}
.spiffy5{border-left:1px solid #bf0202; border-right:1px solid #bf0202;}
.spiffyfg{background:#FF0303;}
</style>
</head>

--->整合<---

<body>
<div>
    
    <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">
    
    CSS无图片无锯齿完美圆角边框
    <br>
    <br>
    <br>
    <br>
    </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>
</body>

DIV+CSS 内容目录总 　为了方便喜欢网站UE设计的各位朋友讨论和学习,特地将DIV+CSS全部内容的目录罗列出来　　　　　　　　　　　　　　　　　　

# 标准树状导航菜单
# 纯div+css实现下拉菜单
# 纯div+css实现简洁型圆角矩形
# CSS无图片无锯齿完美圆角边框
# 纯CSS实现圆角框
# 体验div+css 之圆角框(CSS3.0)
# 体验css+div 之圆角框
# 体验css+div 之层叠和特殊性

#  css之自动换行
# 鼠标事件大全
# CSS控制连续英文字母或数字强制换行
# 让css使网页图片半透明
# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮
# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div 之使用自动空白边让设计居中
# 体验css+div之图像替换 1.徽标图像替换

# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
#  Dreamweaver的超级技巧汇总(1)
#  在线QQ MSN TEL交谈工具代码
#  方便使用的一些小简短input\form代码
#  VSS使用手册
#  JS表单判断函数代码大全 (三)
#  JS表单判断函数代码大全 (二)
#  JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总
# 体验css+div 之　CSS hack:区分IE6，IE7，firefox
# 体验css+div 之兼容标准XHTML的浮动层特效实现
# 因为编码差异导致IE6不能正常解析CSS文件
# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

# 体验css+div 之为什么css+div 会盛行
# 体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

+

Tags: CSS 无图片无锯齿圆角边框

分类:css+div | 评论:0 | 引用:0

上一篇：张美工“半疯狂行动”之努力终有善果
下一篇：纯CSS实现圆角框

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest